在错误 404 的情况下使用 ngIf 重用组件,可能吗?如何捕获错误?
use ngIf to reuse a component in case of error 404 , is possible? How to catch the error?
我在 app-routin.module.ts 中有一个根组件声明为 HomeComponent,我在未知路由的情况下重用它
const routes : Routes = [
{
path: '',
component: PrimaryComponent,
data: { breadcrumb: 'PRIMARY'},
children: [
{ path: '',
component: HomeComponent,
canActivate: [HomeGuard],
pathMatch: 'full',
data: {breadcrumb: 'Start'}
},
....
....
....
{ path: '**',
component: HomeComponent,
data: {breadcrumb: 'Status Error'}
}
]
}
];
这通过加载更改面包屑的同一组件来实现其功能。
我的疑问来了。在我的 HomeComponent 的 html 中,我有一个在主页上显示欢迎消息的跨度,我想重用所有布局和设计,通过带有重定向 [=21 的错误消息来修改该欢迎消息=]到家。
我知道可以使用带有 ngIf 的第二个跨度来显示我之前提到的错误消息。但是,如何捕获错误以生成 ngIf 的条件?还是有一些直接的方法angular?
非常感谢您
您可以尝试获取路线数据(面包屑值)并根据该数据设置您的消息
message = '';
constructor(private route:ActivatedRoute, private router:Router) {
this.message = route.snapshot.data['breadcrumb'] === "Status Error" ? "error message" : "welcome to home page";
}
并在您的模板中使用该消息变量
<div>{{message}}</div>
向您的路线添加一些数据以识别错误:
{ path: '**',
component: HomeComponent,
data: {
breadcrumb: 'Status Error',
error: 404
}
}
在你的 HomeComponent ts 中:
errorView: number;
constructor(private activatedroute: ActivatedRoute){}
ngOnInit() {
const data = this.activatedroute.snapshot.data;
if(data.hasOwnProperty('error')) {
this.errorView = data.error;
}
}
在你的 HomeComponent html:
<div *ngIf="errorView === 404">no url matched</div>
我建议使用 Angular HttpClient: Interceptors
来确定是否发生错误或更具体地说发生了什么类型的错误。然后创建一个集中的 service
,您可以在其中定义一个变量,您可以根据是否发生错误来更改其状态。然后根据服务中的这个变量,您可以使用 *ngIf()
来显示错误消息或欢迎消息。
我在 app-routin.module.ts 中有一个根组件声明为 HomeComponent,我在未知路由的情况下重用它
const routes : Routes = [
{
path: '',
component: PrimaryComponent,
data: { breadcrumb: 'PRIMARY'},
children: [
{ path: '',
component: HomeComponent,
canActivate: [HomeGuard],
pathMatch: 'full',
data: {breadcrumb: 'Start'}
},
....
....
....
{ path: '**',
component: HomeComponent,
data: {breadcrumb: 'Status Error'}
}
]
}
];
这通过加载更改面包屑的同一组件来实现其功能。
我的疑问来了。在我的 HomeComponent 的 html 中,我有一个在主页上显示欢迎消息的跨度,我想重用所有布局和设计,通过带有重定向 [=21 的错误消息来修改该欢迎消息=]到家。
我知道可以使用带有 ngIf 的第二个跨度来显示我之前提到的错误消息。但是,如何捕获错误以生成 ngIf 的条件?还是有一些直接的方法angular? 非常感谢您
您可以尝试获取路线数据(面包屑值)并根据该数据设置您的消息
message = '';
constructor(private route:ActivatedRoute, private router:Router) {
this.message = route.snapshot.data['breadcrumb'] === "Status Error" ? "error message" : "welcome to home page";
}
并在您的模板中使用该消息变量
<div>{{message}}</div>
向您的路线添加一些数据以识别错误:
{ path: '**',
component: HomeComponent,
data: {
breadcrumb: 'Status Error',
error: 404
}
}
在你的 HomeComponent ts 中:
errorView: number;
constructor(private activatedroute: ActivatedRoute){}
ngOnInit() {
const data = this.activatedroute.snapshot.data;
if(data.hasOwnProperty('error')) {
this.errorView = data.error;
}
}
在你的 HomeComponent html:
<div *ngIf="errorView === 404">no url matched</div>
我建议使用 Angular HttpClient: Interceptors
来确定是否发生错误或更具体地说发生了什么类型的错误。然后创建一个集中的 service
,您可以在其中定义一个变量,您可以根据是否发生错误来更改其状态。然后根据服务中的这个变量,您可以使用 *ngIf()
来显示错误消息或欢迎消息。