Question

我正在尝试从其模板中引用活动元素，这是一个简单的组件。

export class SidebarComponent {
  @ViewChildren(RouterLinkActive) linkItems: QueryList<RouterLinkActive>;

  ngAfterViewInit() {
    let activeLink = this.linkItems.find(item => item.isActive);

    console.log('Active link is');
    console.log(activeLink); //this is undefined
  }

}

这是上面组件的简单模板。

<ul>
  <li>
    <a [routerLink]="['/app/link1']" routerLinkActive="active"> Link 1</a>
  </li>
  <li>
    <a [routerLink]="['/app/link2']" routerLinkActive="active"> Link 2</a>
  </li>
</ul>

问题是我没有从模板中获取活动元素，即使样式应用于具有active类的元素。相同的代码使用角度v2但在角度v4中打破。我应该怎么做才能在角度v4中获得活动元素？

Answer 1

我试试

constructor(private router:Router) {}

...

let isLinkActive = this.linkItems.toArray()[0].isLinkActive(this.router);

let activeLink = this.linkItems.find(item => isLinkActive(item));

我认为您的检查过早发生（当isActive尚未设定时）

另见https://github.com/angular/angular/blob/82417b3ca59aa2e5f41ee12db4cb18970b5b4f47/packages/router/src/directives/router_link_active.ts中的代码（第98,108,132行）

无法获取活动元素表单模板

1 个答案: