Question

我有一个典型的导航栏，其中包含一系列链接。

我正在尝试通过创建一个简单的角度指令（'authorize'）来清理导航栏的HTML，如下面的HTML片段所示，但要做到这一点，我需要我的指令能够接收[的值] “列表

”中每个li项的“routerLink”属性

这是我的导航栏html，在列表的顶层有'authorize'属性。

  <ul class="nav navbar-nav" authorize>
    <li [routerLinkActive]="['active']">
      <a [routerLink]="['/dashboard']" auth>Dashboard</a>
    </li>
    <li [routerLinkActive]="['active']">
      <a [routerLink]="['/research']" auth>Research</a>
    </li>
    <li [routerLinkActive]="['active']">
      <a [routerLink]="['/profile']" auth>Profile</a>
    </li>
    <li [routerLinkActive]="['active']">
      <a [routerLink]="['/users']" auth>Users</a>
    </li>
    <li [routerLinkActive]="['active']">
      <a [routerLink]="['/todo']" auth>Todo-List-App</a>
    </li>
  </ul>

我希望我的指令能够读取每个routerLink值并将该值传递给this.routerGuard.permissionApproved（）。到目前为止，我无法从ElementRef中检索这些值。

@Directive({
  selector: '[authorize]'
})
export class AuthorizationDirective implements OnInit {
  private el;

  constructor(private ref: ElementRef,
    private routerGuard: RouteGuard,
    private renderer: Renderer) {
    this.el = this.ref.nativeElement;

  }
  ngOnInit() {
    /*  Is there away to get a list of the [routerLink] values here?
        let links = this.el.getAttribute('href')  <- this returns null

        I want to iterate through a list of routerLink values and call a method in my RouteGuard class. 
        
        links.forEach(link=>{
          this.routerGuard.permissionApproved(link);
        });
        */
  }
}

Answer 1

在ngOnInit

中运行的丑陋示例

Array.from(this.el.children).forEach((li: Element) => {
  const link = li.firstElementChild.getAttribute('routerLink');
  if (link) {
    this.routerGuard.permissionApproved(link);
  }
});

将您的链接模板更改为而不是 bind（路由器仍然有效）：

<li [routerLinkActive]="['active']">
  <a routerLink="/dashboard" auth>Dashboard</a>
</li>

创建角度指令，如何从ElementRef获取列表项的属性值？ Angular 5

1 个答案: