Question

在angular2中，我需要找到隐藏父路由器链接的方法。我必须只显示最低级别的信息 - 而不是将我带到这个级别的路由链接树。

我正在使用Angular 2.0 final。我没有使用angular-cli，我无法切换到它。我的所有代码都包含在此插件中：http://plnkr.co/edit/EdLY62A8GfVimEn48HaA

用户点击'关于'routerLink后，我必须显示 “关于内容”，并隐藏“主页”和“关于”routerLinks。

对于“关于”可能存在的任何子路线，同样的要求也适用。在路由树中的任何一点，我必须只显示该级别的选项 - 所有必须不显示带到此点的父路由链接。

应用组件：

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  template: `
   <a [routerLink]="['/']">Home</a>
   <a [routerLink]="['/about']">About</a>
   <div class="outer-outlet">
     <router-outlet></router-outlet>
   </div>
  `
})
export class AppComponent { }

Answer 1

要根据我们当前的路线隐藏和显示特定链接，我们需要：

了解我们当前的路线

    // Router contains our current path
    import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router';

收听路线变化，获取当前路径并更新链接

    constructor(private router: Router) {

      router.events.subscribe((event: NavigationEvent) => {
        if (event instanceof NavigationStart) { 
          let activeRoute: string = event.url;
          // Now that we know the path
          // we can determine which links to hide
        }
      });

    }

More navigation events

这是demo

angular2如何隐藏父路由器链接

1 个答案: