我正在开发一个Angular2应用程序,其中有一个父组件弹出子组件。
@ViewChild(childPopupComponent) case: childPopupComponent;
我想做的是:当从父组件中弹出的子组件按下保存按钮时,重新渲染父组件以实现反映(而不是重新加载整个页面)。
我知道这会重新渲染当前组件,但如何从@ViewChild
中实现呢?
this.ref.detectChanges();
在您的子组件中注入ChangeDetectorRef
,如下所示:
export class childPopupComponent {
constructor(public cdRef: ChangeDetectorRef) {}
之后,您将能够仅在子组件上运行变更检测循环:
@ViewChild(childPopupComponent) case: childPopupComponent;
this.case.cdRef.detectChanges();
要更新父级元素,您可以在子元素中注入它。
export class childPopupComponent {
constructor(public parent: ParentComponent) {}
然后
this.parent.cdRef.detectChanges()
import { ChangeDetectorRef, SkipSelf } from '@angular/core';
export class childPopupComponent {
constructor(@SkipSelf() private parentCdRef: ChangeDetectorRef) {}
?
。您可以提供抽象类来解决它。https://stackoverflow.com/questions/43198098/angular2-dependency-injection-not-working-when-injected-into-a-dynamic-compone/43198716#43198716 - yurzui<child (somethingChanged)="onHandleWithParentMethod()"
。这样,您就不需要解决循环依赖的问题了。 - yurzui