Angular 4 - 如何使用 Angular 4 将 material 设计 HTML 元素添加到文件中
Angular 4 - How to add a material design HTML element into a file with Angular 4
我正在尝试使用 Angular 以编程方式将 md-button-toggle 插入到按钮切换组中,但 Create Element 似乎不适用于非标准 HTML标签。
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>
Angular 尝试:
// 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>
我只想使用一个数组来表示按钮切换信息...
<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'); } }
]
我正在尝试使用 Angular 以编程方式将 md-button-toggle 插入到按钮切换组中,但 Create Element 似乎不适用于非标准 HTML标签。
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>
Angular 尝试:
// 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>
我只想使用一个数组来表示按钮切换信息...
<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'); } }
]