Question

我得到了这个组件层次结构。有两个子组件的父组件。我希望第一个子组件更新父组件的属性，然后再渲染第二个子组件。我得到了具有两个子组件的主要组件：一个带有选择html输入，另一个带有数据表，数据来自主要组件作为输入。这个想法是当我更改所选值时，我想更改主组件中的数据，以便数据表可以从主组件中获取新数据。我该怎么办？

在第一个孩子中：

@Output() optionSelected = new EventEmitter<string>();

@Input（）数据;

在父母中：

 @Input() displayOption: string;
 @Output() dataToSelect

当displayOption更新时，我希望第二个孩子重新渲染

Answer 1

@Output装饰器用于在子组件与父组件之间共享数据。 EventEmitter用于发出值。

child.component.ts

@Output() optionSelected = new EventEmitter<string>();

sendDataToChild() {
  this.optionSelected.emit('hello');
}

parent.component.html

在子组件的选择器中，当事件被发出时，您可以使用(optionSelected)监听事件，而父组件中的方法log()被调用。

<child-comp (optionSelected)="log($event)"></child-comp>

parent.component.ts

log(value) {
   console.log(value);
}

Answer 2

如果您使用ChangeDetectionStaretgy.OnPush，在子组件中传递可观察对象可能会很有用，并使用异步管道。这样，子组件将仅在可观察到的发射时重绘：

第一个孩子：

@Output() optionSelected = new EventEmitter<string>();

selectOption() {
  this.optionSelected.emit('firstChild')
}

第一个孩子html：

<button (click)="selectOption()">Select<button>

第二个孩子：

@Input() data$;

第二Child.html：

<p>{{data$ | async}}</p>

父母：

data = new BehaviorSubject('')
setSelectedOption(val) {
  this.data.next(val)
}

Parent.html：

<first-child (optionSelected)="setSelectedOption($event)"></first-child>
<second-child [data$]=""></second-child>

Answer 3

要动态地重新渲染组件，可以使用ComponentFactoryResolver，如下所示：

在HTML模板中，您需要为新组件添加一个“锚”：

<ng-template #child2></ng-template>

在您的parent-component.ts中，您将需要通过ViewChild引用锚点，并且需要注入ComponentFactoryResolver：

constructor(private cfr:ComponentFactoryResolver){}
@ViewChild('child2',{read:ViewContainerRef}) childHost:ViewContainerRef;

renderChild2(data?:any){ // im making this optional because i dont know if you require any data to init the component
 this.childHost.clear(); // clear the current rendered component inside the anchor(if any)
 const fct = this.cfr.resolveComponentFactory(<Your component Name>);
 const cpmRef = this.childHost.createComponent(factory);
 if(data){
   componentReference.instance.data = data; //you can acces any public property/method in your component via instance
  }
}

您只需要在要重新渲染child2组件时调用renderChild2（）fcn。

重新渲染角度7组件

3 个答案: