Angular 2：在innerHTML中加载动态组件

我有2个@components说和。现在，我必须动态加载为innerHTML，例如，如下面Angular 2：在innerHTML中加载动态组件

组件1.HTML

<div [innerHTML]="domEl | safeHtml"></div>

在Angular2部件-1类

import { 
    Component, 
    OnInit, 
    ViewEncapsulation 
} from '@angular/core'; 


@Component({ 
    selector: 'component-1', 

    templateUrl: './component-1.html', 

    encapsulation: ViewEncapsulation.None 
}) 
export class Component1 implements OnInit {  

    public ngOnInit() { 
    this.domEl = '<component-2 data="1234"></component-2>' 
    } 
}

组分-2已在app.module.ts文件经由声明[]注入。另外safeHtml是用于安全HTML转换的管道。

即使那么问题是组件-2不加载。任何人都可以建议我如何解决这个问题？

注：

，如果我有分量-2组件1.HTML直接它将工作。但是我们有一个情况是我们不能动态注入组件-2。
Stack基于Angular2，TypeScript和Webpack。

来源

2017-03-16 Ashwin Hegde

不是加载innerHtml，而是使用带有ngIf或ngSwitch的模板。 – Fals

不能这样做，在我的情况下，这是行不通的。 –

您不能将组件注入为html。组件从Shadow Dom渲染到Real Dom。当你使用** innerHTML **注入东西时，它应该是原始的Html，而不是那些需要渲染管道的东西。正如我之前所说的，您必须使用ngIf或ngSwitch – Fals

为了安全起见，Angular不处理传递给[innerHTML]="..."的除了消毒之外的HTML。没有创建绑定，组件，指令等，因为如上所述，Angular忽略了内容。你可以做的是在运行时创建一个组件，就像在Equivalent of $compile in Angular 2中解释的那样。 AFAIR有人建立了一个模块，使这更容易，但我不记得细节。

来源

2017-05-09 16:56:28

Angular 2：在innerHTML中加载动态组件

回答

相关问题