2

我读了很多关于 ngComponentOutlet 不能使用绑定的信息，但据我了解，所有情况都需要类似子 <--> 父绑定/通信（@Input 和 @Output，为此有一个 ng-dynamic-component ，有效）。我认为我的情况有点简单，我只想让绑定在动态创建的组件和它自己的模板之间得到更新。

顺便说一句，我读了这些页面：

如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？

https://github.com/angular/angular/issues/15360

Angular 2 动态选项卡，带有用户单击选择的组件

基于第一个链接的 ngfor 和 ngComponentOutlet 的想法，问题在 2. & 3. 链接中描述

主要思想：创建一个包含不同类型的列表，并根据它们自己的模板以不同的方式呈现它们。这些模板包含到它们自己的组件的绑定。

我整理了一个最小的示例，但不幸的是我无法将它放在 plunker 中，它不起作用，所以这里是代码的主要部分。

小示例代码概述：我有一个空数组和一个按钮，当我单击此按钮时，会创建 2 个组件并将其插入到列表中。列表中的这些组件使用它们自己的自定义模板（例如：comp-a.component.html）呈现。这一切都有效：

顶级html代码：

<div>
  <div>
    <p>This is a static component, with working binding</p>
    <div [innerHtml]="staticBindingMemberValue"></div>
    <br>
    <hr>
  </div>
  <button type="button" (click)="onclick()">Generate dynamic data</button>
  <hr>
  <div *ngFor="let contentItem of arrayContent" style="border: solid 1px; padding: 20px;margin: 20px;">
    <ng-container *ngComponentOutlet="contentItem.component"></ng-container>
  </div>
</div>

顶级组件代码：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  arrayContent:any[] = [];

  staticBindingMemberValue:string = "Initial value for Static comp"

  onclick() {

    let a = new CompAComponent();
    let b = new CompBComponent();

    a.init("NEW value for A")
    b.init("NEW value for B")
    this.staticBindingMemberValue = "NEW value for Static comp"

    this.arrayContent.push(a)
    this.arrayContent.push(b)
  }
}

示例组件“A”（B实际上相同）：

export class CompAComponent implements OnInit {

  component = CompAComponent;
  title:string = "Initial value for A"

  constructor() { }

  ngOnInit() {
  }

  init(newValue) {
    this.title = newValue
  }
}

组件拥有 html 模板（再简单不过了）：

<p [innerHtml]="title"></p>

如您所见，“title”成员有一个初始值，但在 click() 方法中，我调用组件的“init”方法，并尝试设置一个新值。问题是，数据绑定有效，但它没有更新，因此列表使用“A 的初始值”字符串呈现，并且 newValue 只是在后面的代码中设置，但页面没有更新。同时，“staticBindingMemberValue”的更新有效：

这是点击按钮后的样子

我阅读了许多动态实例化组件的方法，我可能会误解一些东西，所以我的问题是：

Angular 6 还没有办法让这个极其简单的动态组件创建工作吗？

我怎样才能使它工作，所以当组件创建后发生某些事情时（调用单击方法，某些服务从服务器获取数据等......），绑定会更新：

  • 我应该使用另一种方式来动态创建组件？

  • 我应该以不同的方式创建数据绑定？

谢谢

[更新]

好的，我找到了一种使用工厂解析器执行此操作的方法，但它并不完全相同，而且有点 hackish .. 对这种方法有什么想法吗？

4

0 回答 0