在错误 404 的情况下使用 ngIf 重用组件，可能吗？如何捕获错误？

Question

我在 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？非常感谢您

Answer 1

您可以尝试获取路线数据（面包屑值）并根据该数据设置您的消息

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>

Answer 2

向您的路线添加一些数据以识别错误：

{ 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>

Answer 3

我建议使用 Angular HttpClient: Interceptors 来确定是否发生错误或更具体地说发生了什么类型的错误。然后创建一个集中的 service ，您可以在其中定义一个变量，您可以根据是否发生错误来更改其状态。然后根据服务中的这个变量，您可以使用 *ngIf() 来显示错误消息或欢迎消息。

在错误 404 的情况下使用 ngIf 重用组件，可能吗？如何捕获错误？

use ngIf to reuse a component in case of error 404 , is possible? How to catch the error?

angular

components

http-status-code-404

angular-ng-if

code-reuse