使用动态组件容器时如何停止重复初始化

Question

我有一个循环遍历组件列表并从列表中加载组件的布局。为了实现这一点，我使用了 dynamic-component，因为我需要一种动态的方式来注入从 object.

定义的组件

如果我单击动态加载的组件，它会运行动态组件 2、3、4 次。我不明白为什么在 child 组件中的偶数之后我得到了我的组件 re-intialised。有没有办法阻止这个或者应该如何动态注入组件。

这是我发现动态注入组件并能够将数据传递给 child 的唯一方法，因为 ngComponentOutlet 当前位于 angular ] 4 不允许您从创建和注入的 child 组件传递和检索数据。

笨蛋：http://plnkr.co/edit/vslspJ?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>

      <buttons (passdata)="getthis($event)" ></buttons>

      <button (click)="loadDogs()">Load Dogs</button>
      <hr />


      <div *ngFor="let comp of componentlist">

        <dynamic-component [componentData]="configureWidget(comp)"></dynamic-component>
      </div>
      <hr />


    </div>
  `,
})



export class AppComponent {


  componentlist:any = [
      { name: 'dogs', component: dogsComponent, inputName: 'colordata',   inputvalue: 'zzz' },
      { name: 'cats', component: catsComponent, inputName: 'showNum',  inputvalue: 'zzz' }
    ]

  configureWidget(widget){
    console.log(widget)

  if(widget.name == 'dogs'){
        return  this.componentData = {
                  component: widget.component,
                  inputs: {
                   showNum : 'ddddd',

                  }
                };
  }  
  if(widget.name == 'cats'){
        return  this.componentData = {
                  component: widget.component,
                  inputs: {
                   colordata : 'ddddd',

                  }
                };
  }      

  }

Answer 1

问题出在 AppComponent 以及您如何将 componentData 传递给动态组件。 Angular 的变化检测知道 variable 它们是否发生了变化，但如果您在模板中使用了函数，它就无法判断。

所以不要使用函数传递处理后的数据，否则changeDetection会调用函数，再次处理数据并传递，这将调用dynamic-component中的setter函数并初始化再次.

Fixed Plunker

代码：

configuredWidgets = {};

  constructor(){
    this.componentlist.forEach(comp => {
      console.log(comp)

      if(comp.name == 'dogs'){
            this.configuredWidgets['dogs'] = {
                      component: comp.component,
                      inputs: {
                       showNum : 'ddddd',

                      }
                    };
      }  
      if(comp.name == 'cats'){
            this.configuredWidgets['cats'] = {
                      component: comp.component,
                      inputs: {
                       colordata : 'ddddd',

                      }
                    };
      }      

    })
  }

使用动态组件容器时如何停止重复初始化

how to stop repeat initialisation when using dynamicComponentContainer

angular

typescript

initialization

components

dynamically-generated