Exception
IMPORT MODULE

Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused.

Examples

404

Sorry, the page you visited does not exist

404 页面。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-exception-404',
  template: ` <exception [type]="404"></exception>`,
})
export class ComponentsException404Component {}

500

Sorry, the server is reporting an error

500 页面。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-exception-500',
  template: ` <exception [type]="500"></exception>`,
})
export class ComponentsException500Component {}

403

Sorry, you don't have access to this page

403 页面,配合自定义操作。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-exception-403',
  template: ` <exception [type]="403">
    <button nz-button [nzType]="'primary'">回到首页</button>
    <button nz-button>查看详情</button>
  </exception>`,
})
export class ComponentsException403Component {}

API

exception

PropertyDescriptionTypeDefault
[type]type of exception, the corresponding default title, desc, img will be given if set, which can be overridden by explicit setting of title, desc, img'403','404','500'-
[title]titlestring-
[desc]supplementary descriptionstring-
[img]the url of background imagestring-
[backRouterLink]Back of router linkstring, any[]/
ng-contentsuggested operations, a default 'Home' link will show if not setTemplateRef<void>-