我需要添加一个带有Material Angular 2样式的按钮。所以我有一个按钮来执行此操作:
<button mat-button (click)="addElement($event, 'button')">Add button</button>
定义了addElement:
addElement(ev, tag) {
const htmlElem = ev.currentTarget;
const el = this.renderer.createElement(tag);
this.renderer.setAttribute(el, 'mat-button', '');
el.textContent = 'New Button';
htmlElem.parentNode.insertBefore(el, null);
}
单击该按钮,然后在我的HTML中创建一个新元素,如下所示:
<button mat-button">Add button</button>
功能代码正确生成按钮,但它不会应用material code
中原始按钮代码中显示的所有子项那么我有办法“刷新”按钮,以便标准Mat按钮的所有内容都适用于通过JS代码添加的按钮吗?
答案 0 :(得分:1)
我不确定你为什么要动态生成按钮,但我会这样做
在你的模板中:
<button mat-raised-button (click)="addNewButton()">Add new </button>
<div *ngFor="let btn of buttonsList">
<button mat-raised-button color="primary">
{{btn+1}}
</button>
</div>
在您的组件中:
export class AppComponent {
buttonsList = [];
addNewButton():void{
const newId = this.buttonsList.length;
this.buttonsList.push(newId);
}
}
您只需遍历阵列并显示按钮即可。每次添加新按钮时,只需将新值推送到阵列中,让框架完成繁重的工作。
这是stackblitz演示:https://stackblitz.com/edit/angular-7rfwrx?file=app%2Fapp.component.ts
希望这有帮助。
答案 1 :(得分:0)
你添加了mat-button属性是正确的,但由于你是动态创建一个按钮,你无法实现生成mat-button的整个结构。
以下是mat-button
的整体风格和结构<button class="mat-button" mat-button="">
<span class="mat-button-wrapper">Add button</span>
<div class="mat-button-ripple mat-ripple"></div>
<div class="mat-button-focus-overlay"></div>
</button>
正如您所看到的,mat-button中还有其他html元素,包括涟漪效果和焦点叠加。
我们将使用Angular Renderer创建html元素,将属性设置为元素并将其附加到元素上。
创建将触发附加的按钮
<button id="clickBtn" (click)="onClick()">Click here to add Button</button>
导入组件中的导入Directive, ElementRef, Renderer2
。
{ Component, Directive, ElementRef, Renderer2 } from '@angular/core';
添加一个指针,该指令将定位附加按钮的html元素(#clickBtn [是我们创建的按钮的id标记]
@Directive({
selector: '#clickBtn'
})
创建一个构造函数来注入渲染器和elementref
constructor(private renderer: Renderer2,private elRef: ElementRef) {
}
触发click事件以附加按钮
onClick() {
const btn = this.renderer.createElement('button');
const span = this.renderer.createElement('span');
const div1 = this.renderer.createElement('div');
const div2 = this.renderer.createElement('div');
const text = this.renderer.createText('I am a Generated Button');
const attrBtn = this.renderer.setAttribute(btn, 'class', 'mat-button');
const attrSpan = this.renderer.setAttribute(span, 'class', 'mat-button-wrapper');
const attrDiv1 = this.renderer.setAttribute(div1, 'class', 'mat-button-ripple mat-ripple');
const attrDiv2 = this.renderer.setAttribute(div2, 'class', 'mat-button-focus-overlay');
this.renderer.appendChild(span, text);
this.renderer.appendChild(btn, span);
this.renderer.appendChild(btn, div1);
this.renderer.appendChild(btn, div2);
this.renderer.appendChild(this.elRef.nativeElement, btn);
}
哇,所以这里发生了什么。正如你所看到的,我们在这里生成mat-button的所有结构
了解有关Renderer2的更多信息请访问此链接。
https://alligator.io/angular/using-renderer2/
请参阅stackblitz
上的实时代码链接https://stackblitz.com/edit/dmgrave-ng-so-answer-dom?file=app%2Fapp.component.ts
希望这有帮助。