将组件动态插入到html中

时间:2017-08-31 14:39:17

标签: html angular angular-material

我正在尝试动态地在一段html中插入一个角度材质组件。我认为,我将无法使用ViewContainerRef

以下是它的工作方式:

我将从数据库中检索字符串(它可以是任何材料组件,例如输入,按钮等......如下所示:

let stringFromDB = "<md-spinner></md-spinner>"

我需要将此字符串传递给我的html的div(这是我的“容器”)。所以我试过了:

@Component({
    selector: 'report',
    template: `<div [innerHtml]="stringFromDB"></div>`
})
export class ReportComponent{
    stringFromDB : string = null;

    constructor(){  
        this.stringFromDB =this.someService.getTemplateStringFromDatabase();
    }
}

我可以传递一个简单的<p></p>。 但不是像md-spinner这样的组件。有关如何实现这一点的任何想法?

1 个答案:

答案 0 :(得分:2)

在角度4中,您可以使用ngComponentOutlet。

模板:

SelectElement mySelect = new SelectElement(yourDriver.FindElement(By.Id("ctl00_ctl00_ctl00_MP_Blank_Body_MP_Base_Body_MP_TopSideMenu_Body_ctl00_cboBehandlingstype")));

mySelect.SelectByText("510111 Normalbehandling");

使用模板字符串构建动态模块和组件:

<ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;"></ng-container>