@angular：如何构建指令以根据所选路由添加属性？

Question

以下代码工作正常（属性 data-toggle-state）正确设置为 active 和无效。

<a [routerLink]="['/home']" [attr.data-toggle-state]="router.isActive('/home', true) ? 'active' : 'inactive'">Home</a>
<a [routerLink]="['/admin']" [attr.data-toggle-state]="router.isActive('/admin', true) ? 'active' : 'inactive'">Home</a>

但是，我想创建一个具有相同功能的新指令。

我的 typescript 指令代码如下所示：

Directive({
  selector: '[xDataToggleState]'
})
export class ToggleStateDirective {

    @Input('xDataToggleState')
    public route: string;

    constructor(private router: Router, private activeRoute: ActivatedRoute, private el: ElementRef, private render: Renderer) {
      this.toggle(this.route);
    }

    private toggle(route: string) {
      if (this.route) {
          this.render.setElementAttribute(this.el.nativeElement, 'data-toggle-state', this.router.isActive(this.route, false) ? 'active' : 'inactive');
      }
    }
}

html 看起来像：

<a routerLink]="['/home']" xDataToggleState="/home">Home</a>

但是，this.route总是未定义的？所以指令不起作用。

Answer 1

在@yurzui 的帮助下，我能够完成这项工作。但是我使用了 ngDoCheck().

查看以下指令的工作代码：

import { Directive, ElementRef, Input, Renderer, HostListener, OnInit, OnChanges, SimpleChanges, DoCheck } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Directive({
  selector: '[xDataToggleState]'
})
export class ToggleStateDirective implements OnInit, DoCheck {

  @Input('xDataToggleState')
  public route: string;

  constructor(private router: Router, private el: ElementRef, private render: Renderer) {
  }

  public ngOnInit(): void {
  }

  public ngDoCheck(): void {
    this.toggle(this.route);
  }

  private toggle(route: string) {
    console.debug('route=' + this.route);

    if (this.route) {
      console.debug('this.router.isActive(this.route, false)=' + this.router.isActive(this.route, false));
      this.render.setElementAttribute(this.el.nativeElement, 'data-toggle-state', this.router.isActive(this.route, false) ? 'active' : 'inactive');
    }
  }
}

当我单击菜单项时，所有项目都会更新，如单击 admin link.[=12= 时从控制台日志中可以看到的那样]

route=/home
this.router.isActive(this.route, false)=false

route=/admin
this.router.isActive(this.route, false)=true

route=/data
this.router.isActive(this.route, false)=false

@angular：如何构建指令以根据所选路由添加属性？

@angular : how to build a directive to add an attribute based on selected route?

attributes

router

angular-directive

angular