如何在根组件[Angular 2]中识别页面未找到路由？答案

【问题标题】：How to identity Page Not Found route in root component [ Angular 2 ]?如何在根组件[Angular 2]中识别页面未找到路由？
【发布时间】：2017-03-08 13:25:11
【问题描述】：

我正在开发一个具有路由功能的示例 Angular 2 应用程序，下面是我的路由相关代码。

....
...
RouterModule.forRoot([
        { path: '', component: LoginComponent },          
        { path: "spa/home", canActivate: [canActivateGuard], component: HomeComponent },
        { path: 'spa/about', canActivate: [canActivateGuard],  component: AboutComponent },
        { path: 'spa/login', component: LoginComponent },
        { path: '**', component: PageNotFoundComponent}
    ])
....
....

在我的根组件中，根据当前路由，需要将“blnDisplayMenu”的值设置为真或假。如果当前路由为“/spa/login”，则根组件中的以下代码将“blnDisplayMenu”设置为 false。

ngOnInit() {  

    this.router.events.subscribe(e => {
        if (e instanceof NavigationEnd) {
            if (e.url == '/' || e.url == '/spa/login') {                   
                this.blnDisplayMenu = false;
            }
            else {                    
                this.blnDisplayMenu = true;
            }
        }
    });
}

我的问题是即使当前路线是“**”，如何将“blnDisplayMenu”设置为 false。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

使用NavigationEnd 并从其网址中，您必须比较所有有效网址，并且需要将blnDisplayMenu 值设置为true 或false，但比较所有路线不是好方法，因此您可以使用data 路由配置选项。

设置一个标志说displayMenu作为**的路由数据，如下所示：

RouterModule.forRoot([
  { path: '', component: LoginComponent },          
  { path: "spa/home", canActivate: [canActivateGuard], component: HomeComponent },
  { path: 'spa/about', canActivate: [canActivateGuard],  component: AboutComponent },
  { path: 'spa/login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent, data : { displayMenu: false } }
])
......

然后在您的组件中使用ActivatedRoute 来检查您的ActivatedRoute 上是否存在displayMenu 变量。

@Component()
export class OneComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.obs = this.route
      .data
      .subscribe(v => {
        if(v.displayMenu === false) {
          this.blnDisplayMenu = false;
        }
      });
  }

  ngOnDestroy() {
    this.obs.unsubscribe();
  }
}

【讨论】：

但是其他路线如何设置为“true”？
知道了，在其他地方
一种解决方案是将NavigationEnd 用于其他路由，将ActivatedRoute 用于** 路由，但我不确定它的执行顺序是否会影响输出[可能会覆盖blnDisplayMenu value ] 和第二个解决方案是在所有其他路线上设置 displayMenu 到 true 并在 ActivatedRoute 的 else 部分设置 blnDisplayMenu 到 true。
另外，如果您没有在所有其他路线上设置displayMenu，那么您将在subscribe 的subscribe 方法中得到v.displayMenu 等于undefinedActivatedRoute，因此您可以通过设置@987654347 来检查@
我认为这个解决方案只有在为所有路由设置了“数据”时才有效，因为订阅只有在设置了“数据”时才会执行

【解决方案2】：

我认为当您希望 blnDisplayMenu 为真/假时，您可能需要在条件上添加更多详细信息。基于有限的信息，这是我能想到的：尝试提出两个条件。 1）你想让你的 blnDisplayMenu 为真 2）你想让你的 blnDisplayMenu 为假

我只是根据上面的代码放置一个示例，假设这两条路线（spa/about 和 spa/home）您希望将 blnDisplayMenu 设为 true。

由于“**”代表任何路线，因此如果您已经覆盖了所有要使 blnDisplayMenu 为 true 的路线，那么其余的所有将自动包含在 else 子句中。

ngOnInit() {
    this.router.events.subscribe(e => {
        if (e instanceof NavigationEnd) {
            if (e.url == '/spa/about' || e.url == '/spa/home') { // add any other route where you want blnDisplayMenu = true
                this.blnDisplayMenu = true;
            }else{
                this.blnDisplayMenu = false;
            }
        }
    });
}

【讨论】：