Question

我有一个列表：

<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”类（第一组）。它们的元素工作正常，但我无法将样式应用于相应的元素标题。

有什么想法吗？

由于

Answer 1

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

将routerLinkActive导出到模板变量，然后使用let bob = { name: 'Bob', age: 87 }, searchBob; propertyOf = object => { return propName => { for (let key in object) { if(key === propName) return object[key] } } } searchBob = propertyOf(bob); console.log(searchBob('age'));：

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>生成的，那么请尝试使用自定义指令。

<强>更新：

我认为我之前的回答并不是很好。 *ngFor指令会设置CSS值，如果 routerLinkActive的任何子项都处于活动状态。

因此，这应该足以让它发挥作用：

routerLink

Answer 2

那么，我找到了解决方案，并与您分享。 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>
...

我希望它可以帮助别人。

如何仅将类添加到链接组的标题中

2 个答案: