Angular 4 - 如何使用 Angular 4 将材料设计 HTML 元素添加到文件中答案

【问题标题】：Angular 4 - How to add a material design HTML element into a file with Angular 4Angular 4 - 如何使用 Angular 4 将材料设计 HTML 元素添加到文件中
【发布时间】：2017-12-10 21:18:27
【问题描述】：

我正在尝试使用 Angular 以编程方式将 md-button-toggle 插入按钮切换组，但 Create Element 似乎不适用于非标准 HTML 标记。

HTML sn-p 我正在尝试附加：

        <md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
            <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
            <md-button-toggle routerLink="/admin/dashboard" (click)=sidenav.close()>
                Admin Dashboard
            </md-button-toggle>
        </md-button-toggle-group>

角度尝试：

// adds a View Dashboard button to the side nav bar when 
addViewDashboard(): void {
    var node = document.createElement('<md-button-toggle routerLink="/' + this.dashboardName
        + '" (click)=sidenav.close() id="view-dashboard-button"> View Dashboard </md-button-toggle>');
    document.getElementById("button-toggle-group").appendChild(node);
    }

（this.dashboardName 只是一个字符串，将被传递到路由器）

我意识到 CreateElement 不应该像这样工作，我真的想不出我还能如何做到这一点。

最终产品应该是这样的：

        <md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
            <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
            <md-button-toggle routerLink="/admin/dashboard" (click)=sidenav.close()>
                Admin Dashboard
            </md-button-toggle>
            <md-button-toggle routerLink="/[this.dashboardName Value]" (click)=sidenav.close() id="view-dashboard-button">
                View Dashboard
            </md-button-toggle>
        </md-button-toggle-group>

【问题讨论】：

标签： html angular material-design angular-material2

【解决方案1】：

我只想使用一个数组来表示按钮切换信息...

<md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
    <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
    <md-button-toggle *ngFor="let b of buttons" routerLink="b.route" (click)="b.clickAction()">{{b.title}}</md-button-toggle>
</md-button-toggle-group>

这是一个可用于驱动模板的组件属性示例。

buttons: any = [
    { title: 'button 1', route: '/admin/dashboard', clickAction: () => { alert('action 1'); } },
    { title: 'button 2', route: '/[this.dashboardName Value]', clickAction: () => { alert('action 2'); } }
]

【讨论】：