Question

我正在研究一个具有路由功能的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”的值设置为true或false。如果当前路由是'/ 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。

Answer 1

我认为当你想要你的blnDisplayMenu为true / false时，你可能需要在条件上添加更多细节。根据有限的信息，我能想到的是：尝试制定两个条件。 1）你想让你的blnDisplayMenu成立的地方 2）你想让你的blnDisplayMenu为假

我只是根据上面的代码提出一个样本，假设这两条路线（spa / about和spa / home）你想让blnDisplayMenu为真。

As＆＃34; **＆＃34;代表任何路线，所以如果你已经覆盖了你想让blnDisplayMenu为true的所有路径，那么rest all将自动包含在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;
            }
        }
    });
}

Answer 2

使用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来检查displayMenu上是否存在ActivatedRoute变量。

@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();
  }
}

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

2 个答案: