Question

我有一个parent和一个child组件。 parent组件实际上是一个页面。 child组件想要做一些与数据库相关的干净工作。

关闭parent页面/组件时。我想是

child ngOnDestroy - ＆gt; child cleanWork - ＆gt; parent ngOnDestroy。

实际是

child ngOnDestroy - ＆gt; parent ngOnDestroy。

//父母

@Component({
  selector: 'parent',
  template: `
    <child
     (cleanWork)="onCleanWork()">
    </child>
  `
})
export class ParentComponent {
  ngOnDestroy() {
    console.log('parent ngOnDestroy');
  }

  onCleanWork() {
    console.log('child cleanWork');
    // dispatch an action, or do something with database
  }
}

//孩子

@Component({
  selector: 'child',
  template: `Hi`
})
export class ChildComponent {
  @Output() cleanWork = new EventEmitter();

  ngOnDestroy() {
    console.log('child ngOnDestroy');
    this.cleanWork.emit(null);
  }
}

我在孩子里面做清洁工作的原因是因为我希望孩子 dumb 。有没有其他/更好的方法？感谢

Answer 1

我会从child创建对parent的引用：

@ViewChild(ChildComponent) child: ChildComponent;

然后在parent需要时调用清理路由（您的ngOnDestroy）

ngOnDestroy() {
  child.cleanup();
}

Answer 2

我得到了Gitter的Brandt B. @babeal的帮助。

由于我使用的是ngrx / store，我应该将所有与数据库相关的操作放在父智能组件中，而不是先在子组件中放置emit，然后在父组件中执行操作。

在这种情况下，我应该直接在父组件中进行清理工作。

Presentational and Container Components将有助于理解。

如何在父母的组件中做孩子的清洁工作

2 个答案: