以下是一个简单的示例,展示了如何封装Angular 7的材料切换组件:
首先,创建一个名为material-toggle.component.ts
的组件文件,并添加以下代码:
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-material-toggle',
template: `
{{ label }}
`,
styleUrls: ['./material-toggle.component.css']
})
export class MaterialToggleComponent {
@Input() label: string;
@Input() value: boolean;
@Output() toggleChange = new EventEmitter();
}
在上面的代码中,我们使用@Input
注解来接收从父组件传递的label
和value
属性。在模板中,我们使用mat-slide-toggle
组件来显示切换按钮,并在切换时发出toggleChange
事件。
接下来,我们需要在父组件中使用MaterialToggleComponent
:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`,
styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
onToggleChange(checked: boolean) {
console.log('Toggle changed: ', checked);
// 执行其他逻辑
}
}
在上面的代码中,我们在父组件的模板中使用了app-material-toggle
组件,并传递了label
和value
属性。我们还监听了toggleChange
事件,并调用了onToggleChange
方法来处理切换事件。
最后,确保在父模块中声明MaterialToggleComponent
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MaterialToggleComponent } from './material-toggle.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, MaterialToggleComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
以上就是封装Angular 7的材料切换组件的示例。你可以根据自己的需求对代码进行修改和扩展。