Question

有更好的方法来执行以下操作吗？以下是在Chrome中旋转CPU（根据Javascript探查器）。

<div *ngFor="let item of items">
    <itemComp [item]="item" [active]="item == service.activeItem"></itemComp>
</div>

每个 itemComp 组件是否有办法在通知时订阅通知？

例如，一旦呈现它们，让我们说用户点击任何项目以标记为活动。任何时候只能激活一个项目。并说，我只想更改活动项目的背景颜色以突出显示它。在这种情况下，当前活动项变为非活动状态，并且新项变为活动状态。如何传播此更改？

Answer 1

是否有一种方法可以让每个itemComp组件在活动时订阅通知？

你的意思是他们第一次被渲染？如果itemComp是你的组件，你可以实现一个角色lifecycle-hooks，如 ngOnInit ，并在那里运行你的代码。

修改：您可以使用以下功能为每个项目添加点击事件：

<div *ngFor="let item of items">
    <itemComp [item]="item" [active]="item == service.activeItem" (click)="activateItem(item)"></itemComp>
</div>

使所有项目无效
激活点击的项目

Answer 2

有多种方法可以做到，但我发现主题是最干净的。

父：

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形式的子/父通信创建的。主题没有得到这种“限制”（性能问题），因此即使在您的应用程序周围的服务或存储库中也可以更广泛地使用。为了提升，主题有很多变化，例如异步和行为主题，所有这些都有一些适合某种情况的小怪癖。

如果您使用的是@Output，请使用eventemitter，否则请使用。

通知活跃的子组件

2 个答案: