Angular2 - 将值传递给使用 ComponentFactory 创建的动态组件

本文介绍了Angular2 - 将值传递给使用 ComponentFactory 创建的动态组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遵循了 Günter Zöchbauer 关于的建议如何创建动态组件我想知道如何将值传递给它 - 例如，子组件有一个 @input.

I was following Günter Zöchbauer's advice on how to create dynamic componentsand I was wondering how I could pass values to it - as in, the child component has an @input.

使用上述问题中给出的 plunker 示例 - plunker - 我怎么能通过子组件是一个字符串，我们称之为消息，然后在单击添加"按钮时显示.

Using the plunker example given in the above question - plunker - how could I pass the child component a string, lets call it message, that would then display when clicking the 'add' button.

以下是子组件外观的示例:

Here's an example of how the child component might look:

import {Component OnChanges, Input} from '@angular/core'

    @Component({
      selector: 'hello',
      providers: [],
      template: `<h1>{{message}}</h1>`,
      directives: []
    })
    export class HelloComponent implements OnChanges {
      @Input() message:any;

      constructor() {
      }

      ngOnChanges(changes:any){
      }
    }

推荐答案

你可以试试下面的，

  let instance  = this.viewContainerRef.createComponent(this.componentFactory, 0).instance;
  instance.message = "some text!!";

这是Plunker！！

这篇关于Angular2 - 将值传递给使用 ComponentFactory 创建的动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

WAS