在 Angular 8 中，如果子组件是从代码端附加的，如何在父组件和子组件之间传递数据？

Question

In Angular 8, I usually pass data between parent and child component on the specification in HTML file as below

    <div id ="parent-container">
      <child-button 
        [ngClass]="child-button"
        [attr.id]="child-button"
        [setOption]="options"
        (notifyChild)="notifyChildButton"
        (notifyParent)="changeNotifyParent($event)"
        >
      </child-button>
    </div>

However, if I would like to do this custom child-button view in appending from the code something like below

    const parentContainer = document.getElementById('parent-container');
    const childButton = document.createElement('child-button');
    childButton.setAttribute('class', 'child-button');
    childButton.id = 'childButton';
    parentContainer.appendChild(childButton0;

then how should I put '[setOption]', '(notifyChild)', and '(notifyParent)' in coding in order to passing data between parent and child component?

Answer 1

as far as my knowlege goes with angular you can not simply create a component like the standard dom/js way. Doing it like this doesn't tell the angular compiler that you want to create a component and it can't handle it.

If you want to create a component dynamically you need a ViewcontainerRef and a component factory to create a component and insert it to the ViewContainerRef.

@Component({
  selector: 'my-app',
  template: `
    <div #vcr></div>
  `,
})
export class App {
 @ViewChild("vcr", { read: ViewContainerRef }) container;

 constructor(private resolver: ComponentFactoryResolver) {}

 createComponent(type) {
    // crete ComponentFactory
    const factory: ComponentFactory = 
    this.resolver.resolveComponentFactory(ChildButtonComponent);

    // Adding it to the view
    this.componentRef: ComponentRef = this.container.createComponent(factory);

    // Handle inputs like object fields

   const compInstance = this.componentRef.instance;
   compInstance.setOption = "anything"

   // Subscribe to outputs
   compinstance.notifyChild.subscribe( () => "Do something")  
  }
}

Answer 2

Havald is correct, however, if you want to notify child component from parent, you should create a Observable(such as EventEmitter) in parent component, and in the init method of child component subscribe this Observable, and if you want child component to notify parent, do the opposite subscription

Answer 3

Try this:

in HTML

<ng-template #dynamic></ng-template>

in Ts File:

 @ViewChild('dynamic', {  read: ViewContainerRef }) viewContainerRef: ViewContainerRef

  constructor(private componentFactoryResolver:ComponentFactoryResolver) {
 }

 createComponent(){ // Call this Metods when you want to append component.
 const factory=this.componentFactoryResolver.resolveComponentFactory(ChildButtonComponent);
 const newTemplate=this.dynamic.createComponent(factory);
 newTemplate.instance.setOption = this.setOption;
 newTemplate.instance.notifyChild.subscribe(e =>{});
 newTemplate.instance.notifyParent.subscribe(e =>{});
 }