Question

我知道，为了动态创建组件，您可以执行以下操作

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

let viewContainerRef = this.host.viewContainerRef;
viewContainerRef.clear();

let componentRef = viewContainerRef.createComponent(componentFactory);
componentref.instance.data = someData;

ngOnInit在viewContainerRef.createComponent()之后被调用，这是在将data属性修补到组件之前。在我的ngOnInit中，我具有事先需要所有属性的逻辑。在创建组件之前，如何将道具传递给组件？

Answer 1

ES6类为对象属性的设置方法带来了新的语法。

set语法将对象属性绑定到要调用的函数尝试设置该属性时。

尝试一下

import { Component, Input , OnInit} from '@angular/core';    
@Component({
  selector: 'hello',
  template: `<h1>Hello {{_name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  _name: string;
  @Input() set name(value) {
    //do your logic here
    this._name = value;
    console.log(value);
  }

  ngOnInit() {

  }
}

示例：https://stackblitz.com/edit/angular-dynamic-com-set

具有输入角度的动态零部件加载

1 个答案: