Question

我一直坚持从子组件获取数据，而子组件是由父组件动态呈现的。

Child.component.html：

if code == 123:
  do something
elif code == 456:
  do something else
else:
  do something amazing

Child.component.ts：

   <span>Side: {{random_side}}</span>
   <button (click)="submitSide(random_side)">Save</button>

现在，由于用户可以根据需要随意生成任意数量的面，所以我将在父组件中动态创建该组件。

parent.component.html

      @Output() eventPassGeneratedSide=new EventEmitter<number>();

      random_side:number=0;

      submitSide(side:number){
       //button clicked. Send data to parent
       this.eventPassGeneratedSide.emit({'side':side});
       }

       onNgInit(){
        this.random_side=Math.floor( Math.random() * 12 );

        }

parent.component.ts

   <ng-template #generated_side></ng-template>
   <button (click)="generateNewSide()">Generate</button>

}

 @ViewChild('generated_side', {read: ViewContainerRef}) generated_side: ViewContainerRef; //generated child component will go here
  sidesComponent;


 handleSubmittedValue($event){
 //when button in child component is clicked, $event is populated so parent can do something with it.

 //ERROR: THIS NEVER FIRES
console.log($event)
   }


   onNgInit(){

         this.sidesComponent = this.componentFactoryResolver.resolveComponentFactory(childComponent);

Answer 1

DynamicComponentLoader不支持输入或输出

引用此：https://github.com/angular/angular/issues/6326

如果您想在父母之间共享数据，请使用Subject或BehaviourSubject

创建服务并定义主题的变量类型

Service.ts

import { Subject } from 'rxjs';
  eventPassGeneratedSide= new Subject();

Child.ts

constructor(private service:Service);
 submitSide(side:number){
       //button clicked. Send data to parent
       this.service.eventPassGeneratedSide.next({side:'side'})
}

Parent.ts

handleSubmittedValue($event){
this.service.eventPassGeneratedSide.subscribe(data=>console.log(data))
   }

动态添加按钮组件并获取返回给父级的值

1 个答案: