angular - 如何根据激活的路由器链接编写条件代码

Question

我的尝试是这样的:

<ul class="nav nav-tabs search-selector" role="tablist">
  <li routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="{{ myroute[0].link }}">{{ myroute[0].label }}</a>
  </li>
  <li routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="{{ myroute[1].link }}">{{ myroute[1].label }}</a>
  </li>
</ul>
<div *ngif="route0 is active">do something related to route 0</div>
<div *ngif="route1 is active">do something related to route 1</div>

Answer 1

您可以创建自己的结构指令，类似于 NgIf，如果您的事件路由与您传递给指令的路由匹配，您将在其中传递路由并在 DOM 中呈现某些内容，如下所示:

if-route.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Directive({ selector: '[ifRoute]' })
export class IfRouteDirective {

  private hasView = false;
  private subscription: Subscription;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private router: Router) { }

  @Input() set ifRoute(route: string) {
    this.performCheck(route);

    this.subscription = this.router.events.subscribe(
      res => {
        this.performCheck(route);
      }
    )
  }

  performCheck(route) {
    if (route === this.router.url && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (route !== this.router.url && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    };
  }

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

您可以在模板中像这样使用它:

<p *ifRoute="'/login'">
  This will be displayed only if you are on login route.
</p>