首页 文章

Angular 4：父组件=>订阅子组件routerLinkActive更改

提问于
浏览 次
0

我有两个组件：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更改并将其发送到父链接组组件，以便我可以更改 Headers （“Servers”）样式（到'font-weight：bold'） .

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

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

或者有更简单的方法吗？

任何帮助表示赞赏 .

编辑：我应该添加链接组的模板：

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

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

当然css存在：

div.active { font-weight: bold }

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

angular

2 回答

  • 0

    好的，我这样解决了：

    link-group ts文件：

    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>
    回复于
  • -1

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

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

    here的示例示例

    希望这有帮助！

    回复于

相关问题