有没有更好的方法来执行以下操作？以下是在 Chrome 中旋转 CPU（根据 Javascript 分析器）。
<div *ngFor="let item of items">
<itemComp [item]="item" [active]="item == service.activeItem"></itemComp>
</div>
有没有办法让每个 itemComp 组件在它们变为活动状态时订阅通知？
例如，一旦它们被渲染，假设用户点击任何项目以标记为活动。任何时候只能激活一项。并且说，我只想更改活动项目的背景颜色以突出显示它。在这种情况下，当前活动项变为非活动项，而新项变为活动项。如何传播此更改？
【问题讨论】：
标签： angular rxjs angular2-template
是否有办法让每个 itemComp 组件在激活时订阅通知？
你的意思是他们第一次被渲染的时候？如果 itemComp 是您的组件，您可以实现 angulars lifecycle-hooks 之一，例如 ngOnInit 并在那里运行您的代码。
编辑：您可以使用以下功能为每个项目添加点击事件：
<div *ngFor="let item of items">
<itemComp [item]="item" [active]="item == service.activeItem" (click)="activateItem(item)"></itemComp>
</div>
【讨论】：
有多种方法可以做到这一点，但我发现主题是最干净的。
家长：
export const someEvent: Subject<Something> = new Subject<Something>();
export class someParentClass{
public somethingHappened() {
someEvent.next("something");
}
}
在孩子身上：
import { Subscription } from 'rxjs/Subscription';
import { someEvent } from './someParentClass';
export class SomeChildClass implements OnInit, OnDestroy{
public someSubscription: Subscription;
public ngOnInit(){
this.someSubscription = someEvent.subscribe((something) => {
console.log("something happened" ,something);
});
}
public ngOnDestroy(){
// if you don't do this then you'll have events firing off in components
// that don't exist anymore
this.someSubscription.unsubscribe();
}
}
只是关于主题与事件发射器的一个小注释。 事件发射器是专门为@Output 形式的子/父通信创建的。 Subject 没有这种“限制”（性能问题），因此即使在您的应用程序周围的服务或存储库中也可以更广泛地使用。为了提升，主题有很多变化，例如异步和行为主题，它们都有适合特定情况的小怪癖。
如果您使用@Output，请使用事件发射器，否则使用主题。
【讨论】：