1

我有一个类似的清单：

<ul>
<li><a class="group-active">Group 1</a>
    <ul>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page1']">Group 1 - Page 1</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a>
    </ul>
</li>
<li><a>Group 2</a>
    <ul>
        <li routerLinkActive="active"><a [routerLink]="['/group2/page1']">Group 2 - Page 1</a>
        <li routerLinkActive="active"><a [routerLink]="['/group2/page2']">Group 2 - Page 2</a>
        <li routerLinkActive="active"><a [routerLink]="['/group2/page3']">Group 2 - Page 3</a>
    </ul>
</li>
<li><a>Group 3</a>
    <ul>
        <li routerLinkActive="active"><a [routerLink]="['/group3/page1']">Group 3 - Page 1</a>
        <li routerLinkActive="active"><a [routerLink]="['/group3/page2']">Group 3 - Page 2</a>
        <li routerLinkActive="active"><a [routerLink]="['/group3/page3']">Group 3 - Page 3</a>
    </ul>
</li>
</ul>

我需要：当我选择其中一个元素时，更改（第一组的）类“group-active”。他们的元素工作正常，但我无法将样式应用于相应的元素标题。

任何想法？

谢谢

4

2 回答 2

2

这是个好问题。我可以看到很多人需要这个。

将 routerLinkActive 导出到模板变量，然后使用isActive：

<li><a [class.group-active]="r1.isActive || r2.isActive || r2.isActive">Group 1</a>
    <ul>
        <li routerLinkActive="active" #r1="routerLinkActive"><a [routerLink]="['/group1/page1']" #r1="routerLinkActive">Group 1 - Page 1</a>
        <li routerLinkActive="active" #r2="routerLinkActive"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a>
        <li routerLinkActive="active" #r3="routerLinkActive"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a>
    </ul>
</li>

您还可以编写一个简单的指令，它具有boolean如下内容：

@Directive({
   selector: '[any-active]',
   exportAs 'anyActive'
})
public class AnyActiveDirective implements DoCheck {
  @ViewChildren(RouterLinkActive)
  public links: QueryList<RouterLinkActive>;

  public active: boolean = false;

  public constructor(private cdr: ChangeDetectorRef) {
  }

  public ngDoCheck() {
     if(this.links) {
        const active = !!this.links.find((link)=>link.isActive);
        if(this.active !== active) {
            thia.active = active;
            this.cdr.markForCheck();
        }
     }
  }
}

然后在模板中：

<li any-active #group1="actActive"><a [class.group-active]="group1.active">Group 1</a>
    <ul>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page1']" #r1="routerLinkActive">Group 1 - Page 1</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a>
    </ul>
</li>

如果您的模板是静态的，您可以尝试第一种方法，但如果您的链接是使用 a 生成的，*ngFor那么请尝试使用自定义指令。

更新：

我不认为我之前的回答很好。如果有任何子节点处于活动状态，该routerLinkActive指令将设置 CSS 值。routerLink

因此，这应该足以让它工作：

<li><a routerLinkActive="group-active">Group 1</a>
    <ul>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page1']">Group 1 - Page 1</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page2']">Group 1 - Page 2</a>
        <li routerLinkActive="active"><a [routerLink]="['/group1/page3']">Group 1 - Page 3</a>
    </ul>
</li>
于 2017-07-07T02:10:46.247 回答
1

好吧，我找到了我的解决方案，并与您分享。Angular 非常聪明。只是我需要在相应的元素中添加相同的 routerLinkActive ：

<li><a routerLinkActive="group-active">Group 1</a>
...
<li><a routerLinkActive="group-active">Group 2</a>
...
<li><a routerLinkActive="group-active">Group 3</a>
...

我希望它可以帮助别人。

于 2017-07-07T01:57:37.287 回答