Question

我有很多按钮。当我单击任何人时，它将在一个方法中设置taskId。并调用子组件（意味着将showDetailComponent更改为true）。

<div *ngIf='showDetailComponent'>
      <app-taskdetail [id]='myVal'></app-taskdetail>
</div>

当我第一次单击任何按钮时，但是单击任何其他按钮时，子组件的数据不会得到更新（意味着未调用子组件。）

Answer 1

<div *ngIf='showDetailComponent'>
      <app-taskdetail [id]='myVal'></app-taskdetail>
</div>

Child组件未更新，因为该组件已经渲染到dom，第一次使用是因为您使用ngIf阻止了子组件，这意味着当您第一次单击按钮时，布尔值变为true，因此子组件被渲染。

要在每次单击按钮后更新该值，需要将布尔值设置为false，这将从dom中删除该组件，然后将该值恢复为true。

这将使值再次更新。

public updateValue() {
this.showDetailComponent = false;
setTimeout(() => {
this.myVal = valNeeded;
// set all the values..
this.showDetailComponent = true;
}, 10);}

Answer 2

@Lekens是正确的，但如果目的是更新子组件，我认为有更好的方法来实现。

将输入传递给子组件，该子组件将监视该输入上的所有更改

@Input() myVal: string;

    ngOnChanges(changes: SimpleChanges) {
        this.doSomething(changes.myVal.currentValue);
    }

通过共享服务使用主题在组件之间进行通信

第二次子组件未调用

2 个答案: