Question

我正在尝试将组件动态添加到我的@Component模板中，但是它正在填充但没有显示？

我有一个组件。

@Component({
selector: 'map-toolbar-action',
//templateUrl: './map-toolbar- 
action.component.html',
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 buttons = ['<tool-map-zoom> 
</tool-map-zoom>',
'<tool-map-undo></tool-map-undo>',
'<tool-import></tool-import>',
'<tool-map-download></tool-map-download>',
'<tool-map-print></tool-map-print>']

public static buttonString = "";

    public static 
    arrayToString(arrayItems:Array<string>) 
    {
    let val:string = "";
    arrayItems.forEach(element => {
      val = val + element;
    });
    return val;
    }

我希望这会填充

'<tool-map-zoom></tool-map-zoom>',
'<tool-map-undo></tool-map-undo>',
'<tool-import></tool-import>',
'<tool-map-download></tool-map-download>',
'<tool-map-print></tool-map-print>'

然后会依次将组件添加到模板中，但是那样无法正常工作...我该怎么做？

非常感谢您的帮助！

Answer 1

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

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

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

<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>

应用程序加载时，它会使用用户确定要使用其“自定义”工具的方式加载全局“ components”变量。

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

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

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

Answer 2

您无法使用尝试的方式更改模板。该模板在应用程序的初始阶段仅读取一次。我想您可以使用* 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 3

如果要动态添加尚不了解的组件，并且以声明的方式进行，则需要使用ngComponentOutlet：

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

您需要将组件添加到某个模块的entryComponents，然后将其传递到ngComponentOutlet。如果您使用的是惰性模块，请确保您通过了知道该Injector的{{1}}，请参阅：

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

Answer 4

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

Angular 7在@Component模板中添加数组值

4 个答案: