角4 - 如何添加材料設計的HTML元素與角4

我試圖插入一個MD-按鈕切換到按鈕切換組編程與角，但Create Element似乎並沒有一道很好地工作文件非標準的HTML標籤。角4 - 如何添加材料設計的HTML元素與角4

HTML片段我試圖追加：

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

來源

2017-07-06 Buffet Time

我只想用一個數組來表示切換信息按鈕...

<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'); } } 
]

來源

2017-07-06 20:41:12

角4 - 如何添加材料設計的HTML元素與角4

回答

相關問題