异常
IMPORT MODULE

异常页用于对页面特定的异常状态进行反馈。通常,它包含对错误状态的阐述,并向用户提供建议或操作,避免用户感到迷失和困惑。

代码演示

404

抱歉,你访问的页面不存在

404 页面。

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

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

500

抱歉,服务器出错了

500 页面。

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

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

403

抱歉,你无权访问该页面

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

成员说明类型默认值
[type]页面类型,若配置,则自带对应类型默认的 titledescimg,此默认设置可以被 titledescimg 覆盖'403','404','500'-
[title]标题string-
[desc]补充描述string-
[img]背景图片地址string-
[backRouterLink]后退路由链接string, any[]/
ng-content建议操作,配置此属性时默认的『返回首页』按钮不生效TemplateRef<void>-