Angular 6 UI 在不使用父模板的情况下实施变更检测

Question

我需要在 angular 中制作一个可重用的组件，它将被打包到一个 npm 模块中。作为 angular 的新手，我遇到了 UI 变化检测的障碍。

要让组件首先工作，应用程序需要进行 api 调用以收集数据 required 以进行设置，然后组件需要运行一些初始化。

this.dataService.getData().subscribe((data) => {
   this.data = data;
   this.npmComponent.init(this.data);
});


<app-npm-component></app-npm-component>

然后在我的组件中，我需要运行一组设置任务，之后它需要监听数据的变化，重新运行一组设置任务并更新 ui.

@Component({
...,
changeDetection: ChangeDetectionStrategy.OnPush
});

...

init(setupData: any): void {
    this.cdr.detectChanges();
    this.data = setupData;
}

<ul *ngIf="data.arrayOfStuff">
    <li *ngFor="let item of data.arrayOfStuff">{{item}}</li>
</ul>

通常的 ChangeDection 实现会抛出一个错误：NullInjectorError：没有 ChangeDetectorRef 的提供者！因为数据不是通过模板从它的父级传递的。

实现这种事情的正确方法是什么？提前感谢您的宝贵时间。

编辑：我在 ViewChild 中找到了答案

@ViewChild(NpmComponent, {static: false}) npmComponent: NpmComponent;

Answer 1

输入 child

<app-npm-component [data]="setupData"></app-npm-component>

并且在 child 组件的 class

@Input() data;

Angular 将负责监听输入的变化。

您也可以使用异步管道进行订阅。

在parent组件中

setupData$ = this.dataService.getData();

并使用异步管道

将数据传递给child

<app-npm-component [data]="setupData$ | async"></app-npm-component>

无需订阅。

如果您需要通过函数运行数据使用映射

setupData$ = this.dataService.getData().pipe(map(data => yourFunction(data)));

Angular 6 UI 在不使用父模板的情况下实施变更检测

Angular 6 UI implementing change detection without using parent template

javascript

typescript

angular

angular-changedetection