0

我有一个带有链接列表的典型导航栏。

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

这是我的导航栏 html，在列表的顶层具有“授权”属性。

  <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);
        });
        */
  }
}

4

1 回答 1

1

运行中的丑陋示例ngOnInit

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

将您的链接模板更改为不绑定（路由器仍然可以工作）：

<li [routerLinkActive]="['active']">
  <a routerLink="/dashboard" auth>Dashboard</a>
</li>
于 2018-04-12T17:37:52.793 回答