Question

以下代码正常工作（属性数据切换状态）已正确设置为活动和非活动。

<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>

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

我的打字稿指令代码如下：

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');
    }
  }
}

当我点击一个菜单项时，所有项目都会更新，因为在点击管理链接时可以从控制台日志中看到。

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：如何根据所选路由构建指令以添加属性？

1 个答案: