Angular2 - 将参数传递给动态生成的组件？

Question

我有一个简单的演示应用程序，我正在模拟从DB手动插入/获取数据并注入新组件 - 根据输入的数字。

Plunker

所以如果我点击“手动”按钮两次：

如果我在文本中设置“3”并单击“从数据库中获取” - 我得到预期的延迟（模拟数据库），然后：

这一切都按预期工作。

“父”组件是：

//src/MainPage.ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="putInMyHtml()">Insert component manually</button>
    <p> # Items to fetch  : <input type="text" style='width:40px'  [(ngModel)]="dbNumItems" name="dbNumItems"/> <input type='button' value='fetch from db' (click)='fetchItems($event)'/></p>
    <div #myDiv>
       <template #target></template> 
    </div>
  `
})
export class MainPage {
  @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
  dbNumItems: string;
  constructor(private cfr: ComponentFactoryResolver) {}

  fetchItems(){ 
        var p= new Promise((resolve, reject) => { //simulate db
        setTimeout(()=>resolve(this.dbNumItems),2000)
    });

  p.then(v=>{

    for (let i =0;i<v;i++)
    {
         this.putInMyHtml() ;// inject "v" times
    }
  })

}

  putInMyHtml() {
   // this.target.clear();
   let compFactory = this.cfr.resolveComponentFactory(TestPage);
    this.target.createComponent(compFactory);
  }
}

这是Injected组件：

//src/TestPage.ts
@Component({
  selector: 'test-component',
  template: '<b>Content  : Name={{user.Name}} Age={{user.Age}}</b><br/>',
})
export class TestPage {
    @Input
     User:Person;

}

那问题出在哪里？

如您所见，在注入的组件中，我有：

@Input
User:Person;

这意味着我希望parent组件将Person对象传递给每次注入。

换一种说法 ：

题

看看“db db stage”之后，我怎样才能将定制person传递给每次注射？

  p.then(v=>{

    for (let i =0;i<v;i++)
    {
         let p = new Person();
         p.Name = "name"+i;
         p.Age = i;

         this.putInMyHtml() ; //how to I pass `p` ???

    }
  })

}

预期产量：

NB我不想使用ngFor因为我不需要在后端保持一个数组。 这是一个定期注入新文章的应用程序。我很高兴知道是否有更好的方法。

Answer 1

您可以使用组件引用的instance属性执行此操作，如下所示：

putInMyHtml(p) {
   // this.target.clear();

    let compFactory = this.cfr.resolveComponentFactory(TestPage);

    let ref = this.target.createComponent(compFactory);
    ref.instance.user = p;
}

- @Input()绑定，语法错误。

- 为模板添加了一个安全导航操作符（ ? ），以便对异步输入进行空检查。

固定的plunker： https ：//plnkr.co/edit/WgWFZQLxt9RFoZLR46HH ？ p = preview

Answer 2

使用* ngFor并遍历Person数组，这样就可以使用@Input。 你可能想要这样的东西

<ul>
  <li *ngFor="let person of people">
    <test-component [User]=person></test-component>
  </li>
</ul>

添加人物：Person []到您的主要组件以及何时获取物品

p.then(v=>{

for (let i =0;i<v;i++)
{
   let p = new Person();
   p.Name = "name"+i;
   p.Age = i;  
   people.push(p)
}
})