要在Angular 7中通过指令向按钮添加mat-raised-button样式,可以按照以下步骤操作:
npm install @angular/material
app.module.ts
文件中添加以下代码:import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
// 其他模块
MatButtonModule
],
// 其他配置
})
export class AppModule { }
mat-button.directive.ts
,并添加以下代码:import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[appMatButton]'
})
export class MatButtonDirective implements OnInit {
constructor(private elementRef: ElementRef) { }
ngOnInit(): void {
const button = this.elementRef.nativeElement;
button.classList.add('mat-raised-button');
}
}
mat-raised-button
样式的按钮上使用指令。在你的组件模板中,将指令应用到需要添加样式的按钮上,例如:
mat-raised-button
样式。打开你的CSS文件(例如styles.css
)并添加以下代码:.mat-raised-button {
/* 这里可以添加按钮样式 */
}
这样,通过这个指令,你可以向任何按钮添加mat-raised-button
样式。请注意,你可以根据需要自定义指令和样式。