Angular 7 动态加载@Component

Question

我正在尝试将组件动态添加到我的 @Component 模板中，这些组件正在填充，但当我更改“buttonstring”变量时，工具栏不会更改。

我有一个组件..

@Component({
selector: 'map-toolbar-action',
template:'<p style="position: absolute;z- 
index:5000">' + mapValues.buttonString + 
'</p>',
styleUrls: ['./map-toolbar- 
action.component.scss']
})
export class MapToolbarActionComponent 
implements OnInit {

constructor() {
mapValues.buttonString = 
mapValues.arrayToString(mapValues.buttons);
}

ngOnInit() {
}

}

我有一个带有这些元素的单身人士......

public static buttonString = "<component1></component1><component2></component2><component3></component3>";

我希望我可以更改 buttonString 以添加、减去或完全替换组件列表，并且工具栏会更新。

buttonString = "<component2></component2><component3></component3>";
buttonString = "<component1></component1><component2></component2><component3></component3><component4></component4>";
buttonString = "<componentA></componentA><componentB></componentB><componentC></componentC>;

这会反过来将组件更新到模板，但它不是那样工作的......我该如何完成？

任何帮助是极大的赞赏！！

Answer 1

您无法使用您尝试的方式更改模板。 模板在应用程序的最初阶段只读取一次。 我想您可以使用 *ngIf 或使用ComponentFactoryResolver 的“动态添加组件”来实现它。 要动态添加组件，首先需要在模块的“entryComponents”中声明

  entryComponents:[HelloComponent]

然后，创建一个 .html 之类的

<ng-template #container>
</ng-template>

你的 main.component.ts

  @ViewChild('container', { static: true, read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit()
  {
    this.entry.clear();
    const factory = this.resolver.resolveComponentFactory(HelloComponent);
    const componentRef = this.entry.createComponent(factory);
    componentRef.instance.name = this.name;
  }

查看stackblitz 中的一个简单示例

Answer 2

看来您最初可以使用“模板”加载组件

template:'<p style="position: absolute;z-index:5000">' + components + '</p>'
**Global variable somewhere
public static components = "<component1></component1><component2></component2> 
<component3></component3>"

您不能使用 2 路绑定来更改此字符串并动态填充组件。 我不知道如何让 ComponentFactoryResolver 满足我的需求，所以......我所做的是使用全局状态变量和包含我的工具组件的父组件工具栏 html 中的 *ngIf 来处理这个问题

<p *ngIf="myAppStateValue ==='foo'">
<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
</p>
<p *ngIf="myAppStateValue ==='bar'">
<component-three></component-three>
<component-four></component-four>
<component-five></component-five>
</p>

然后我还在加载工具栏的父应用程序 html 中添加了一个 *ngIf

 <div *ngIf="formValues.mapState !='custom'"><toolbar-1></toolbar-1> 
 </div>
 <div *ngIf="formValues.mapState =='custom'"><custom-toolbar></custom-toolbar></div>

当应用程序加载时，它会加载全局“组件”变量，其中包含用户确定的他们想要的“自定义”工具。

public static components = "<component1></component1><component2></component2> 
<component3></component3>"

然后在自定义工具栏中我使用“模板”参数来加载组件

template:'<p style="position: absolute;z-index:5000">' + components + '</p>'

Answer 3

如果你想动态添加你不知道的组件，并以声明的方式添加，你需要使用ngComponentOutlet ：

https://angular.io/api/common/NgComponentOutlet

您需要将组件添加到某个模块的entryComponents中，然后将其传递给ngComponentOutlet 。 如果使用的是懒惰模块-确保你通过Injector这是知道的entryComponents ，请参阅：

https://angular.io/api/common/NgComponentOutlet

Answer 4

Funn_Bobby 似乎早就通过模板中的 *ngIf 解决了这个问题。 对于所有处于类似情况或需要更灵活解决方案的人，我编写了一个库，其明确目的是轻松地从字符串加载组件： ngx-dynamic-hooks 。 看看它住在这里。 只是想把它留在这里以防它对某人有帮助。