Vật liệu góc 7 - Trượt chuyển đổi

Các <mat-slide-toggle>, một Chỉ thị Angular, được sử dụng như một công tắc bật / tắt với khả năng tạo kiểu dáng material design và hoạt ảnh.

Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để vẽ điều khiển chuyển đổi slide bằng Angular Material.

Tạo ứng dụng Angular

Làm theo các bước sau để cập nhật ứng dụng Angular mà chúng tôi đã tạo trong Angular 6 - chương Thiết lập dự án -

Bươc	Sự miêu tả
1	Tạo một dự án với tên materialApp như được giải thích trong chương Angular 6 - Project Setup .
2	Sửa đổi app.module.ts , app.component.ts , app.component.css và app.component.html như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi.
3	Biên dịch và chạy ứng dụng để xác minh kết quả của logic được triển khai.

Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSlideToggleModule, MatCheckboxModule} from '@angular/material'
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSlideToggleModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi app.component.html.

<mat-slide-toggle
   class = "tp-margin"         
   [checked] = "checked"
   [disabled] = "disabled">
   Slide!
</mat-slide-toggle>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

Sau đây là nội dung của tệp CSS đã sửa đổi app.component.css.

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

Sau đây là nội dung của tệp ts đã được sửa đổi app.component.ts.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   disabled = false;
   checked = false; 
}

Kết quả

Xác minh kết quả.

Chi tiết

Đầu tiên, chúng tôi đã tạo hai hộp kiểm bằng mat-checkbox và liên kết chúng bằng cách sử dụng ngModel với các biến. Các thuộc tính này sẽ được sử dụng để xử lý việc chuyển đổi slide.
Sau đó, chúng tôi đã tạo trang trình bày chuyển đổi và giới thiệu các thuộc tính khác nhau của nó được liên kết với các biến trong tệp .ts.