Question

如果有一个父组件和一个子组件，则有一种方法可以在不检查整个组件树的情况下触发子组件中的事件。

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方法时，父组件不必检查视图（只需记录“子”而不是“父”和“子”）。

Answer 1

也许您的问题出在eventPropagation

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

查看是否有帮助

Answer 2

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

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

如果您认为要在继承的项目中使用变更检测，建议您从叶组件开始应用OnPush策略，检查一切是否仍在工作，然后跟着祖先并上一层楼在发根的时候。

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

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

2 个答案: