Question

我有两个组件：LinkGroup和LinkItem。

LinkItem的模板很简单：

<a routerLinkActive="active"
   [routerLinkActiveOptions]="{exact: true}"
   [routerLink]="link"> {{ title }}
</a>

组件的使用方式如下：

<link-group title="Users">
    <link-item title="..." link="...">
    <link-item title="..." link="...">
    <link-item title="..." link="...">
</link-group>

<link-group title="Servers">
    <link-item title="Server1" link="...">
    <link-item title="Server2" link="...">
    <link-item title="Server3" link="...">
</link-group>

如果是单击Server2我想捕获routerLinkActive更改并将其发送到父链接组组件，以便我可以更改标题（“服务器”）样式（到'font-weight：bold'）。

我查看了https://angular.io/api/router/RouterLinkActive的指令页面。

但由于我对Angular4很新，我愿意接受建议。我应该扩展'RouterLinkActive'指令并覆盖ngOnChanges吗？（如何？）

或者有更简单的方法吗？

感谢任何帮助。

编辑：我应该为link-group添加模板：

<div routerLinkActive="active">{{ title }}
   <ng-content></ng-content>
</div>

请注意，所有链接项组件（以及与其routerLink指令的实际链接）都在

中

当然，css存在：

div.active { font-weight: bold }

注意：当我根本不使用组件时，在纯html + routerLink指令中它可以工作。

Answer 1

好的，我解决了这个问题：

link-group ts file：

active = '';
@ContentChildren(LinkItemComponent) linkItems: QueryList<LinkItemComponent>;



    ngAfterContentInit() {
        this.router.events.subscribe(event => {
          if (event instanceof NavigationStart) {
            const c: LinkItemComponent = this.linkItems.find(item => item.link === event.url);
            if (c)
              this.active = 'active';
            else
              this.active = '';
          }
        });
      }

然后简单地将'active'添加到div的class属性中：

<div class="...  {{ active }}">{{ title }}
   <ng-content></ng-content>
</div>

Answer 2

我认为问题来自于你在激活时没有超链接标记的样式。您可以尝试将样式添加为：

.active {
  font-weight:bold;
  color:red;
}

here

的示例

希望这有帮助！

角度4：父组件=＆gt;订阅子组件routerLinkActive change

2 个答案: