Angular - 有没有办法将更改检测限制为当前组件及其子组件答案

【问题标题】：Angular - Is there a way to limit change detection to the current component and it's childrenAngular - 有没有办法将更改检测限制为当前组件及其子组件
【发布时间】：2019-06-28 17:20:43
【问题描述】：

如果有父组件和子组件，有没有办法在不检查整个组件树的情况下触发子组件中的事件。

import { Component } from '@angular/core'

@Component({
    selector: 'my-app',
    template: '<b>{{ text() }}</b><br /><app-child></app-child>'
})
export class AppComponent {
    text() {
        console.log('parent')
        return 'parent'
    }
}

@Component({
    selector: 'app-child',
    template: '<b>{{ text() }}</b><span (click)="change()"> | Change</span>'
})
export class ChildComponent {
    text() {
        console.log('child')
        return 'child'
    }

    change() { }
}

在这里，我希望在子组件中调用 change 方法时，父组件不必检查视图（只需记录“子”而不是“父”和“子”）。

【问题讨论】：

听起来你在找onPush。
我实际上是在寻找 onPush 的“对立面”。当从父项触发事件时，推送将避免子项中的更改检测。当子级触发事件时，我想避免在父级中检测到更改。
抱歉，在快速阅读时误会了。无论如何，这就是 @input/@output 事件发射或单例 service 的用途。
我不确定输入/输出绑定或单例服务在这种情况下会有什么帮助。我有一个带有触发许多事件的组件的大型 Angular 应用程序，它在应用程序内很慢，因为每次用户滚动此组件时都会检查整个组件树（使用(scroll)=""）。
使用(scroll) 与NavigationEnd 的路由器绑定在一起，因此这是预期的行为。相反，可以使用 HostListener 直接将事件侦听器附加到 dom 对象，并通过 Renderer2 处理对 DOM 的更新（假设这可能是您订阅的内容？）但我想这取决于整个情况需要不太清楚。抱歉，帮不上忙。

标签： angular angular2-changedetection

【解决方案1】：

也许你的问题在于 eventPropagation

添加<b>{{ text() }}</b><span (click)="change(); $event.stopPropagation()"> | Change</span>

看看有没有帮助

【讨论】：

停止事件传播不会改变 Angular 处理事件的方式。 embed.plnkr.co/HWcQVDkg1EdeeRcCfpVN这里点击“更改”控制台日志“父”和“子”

【解决方案2】：

你需要在父组件中使用changeDetection: ChangeDetectionStrategy.OnPush。

还建议始终（对于每个组件）使用 OnPush 策略，如果需要，请使用 ChangeDetectorRef 中的 detectChanges() 手动启动检测。

如果你想在继承的项目中使用变更检测，建议从叶子组件开始应用OnPush策略，检查一切是否仍然正常，然后跟随祖先，一次上一层到根目录。

Here there is a good article about change detection in Angular.

【讨论】：

这是不正确的，即使在父组件中添加OnPush，对于每个子组件，子组件都会触发其父组件变更检测
如果您的项目中发生这种情况，则意味着您的代码中存在触发更改检测的内容（例如，事件或 API 调用的应答）。
我的意思是这就是它的设计方式，例如如果在子组件中单击按钮，则父视图也会在ngAfterViewChecked中进行检查
Starting ngAfterViewChecked 并不意味着整个更改检测已在父组件上执行，正如此答案 github.com/angular/angular/issues/7055#issuecomment-364525025 和以下同一用户所建议的那样。尽量避免使用ngAfterViewChecked。
他的评论不一定是真的！您可以参考解释更改检测如何在 Angular 中实际工作的文章。它被称为ngAfterViewChecked 意味着在检查视图（具有子组件）时将调用此函数。它从触发检测的组件开始一直到根。通过使用计时器和主题自己尝试，并在子模板中使用异步管道订阅，您会注意到根的所有父组件将在每次计时器滴答时登录其ngAfterViewChecked。