【一起学Rust | 框架篇 | Tauri2.0框架】在Angular中集成Material Web Components

---

前言

Web Components是一种用于构建可重用的Web应用组件的技术标准。它由一系列相关的技术组成，包括自定义元素、Shadow DOM、模板和HTML Imports。

Web Components的主要好处和优点包括：

1. 可重用性：Web Components允许开发者创建自定义的HTML元素，这些元素可以在不同的项目和应用中重复使用。这样可以节省开发时间和精力，并提高代码的可维护性。

2. 封装性：通过使用Shadow DOM，Web Components可以将组件的样式和逻辑封装在组件内部，避免和其他组件或全局样式发生冲突。这样可以避免全局污染，提高代码的可靠性和可预测性。

3. 组件化开发：Web Components鼓励将应用拆分为独立的组件，每个组件负责特定的功能或UI。这种组件化的开发方式可以提高代码的可维护性和可扩展性，并促进团队合作。

4. 平台无关性：Web Components是基于标准的Web技术，可以在不同的浏览器和平台上使用，而不需要依赖任何特定的框架或库。这使得Web Components具有很好的兼容性和可移植性。

5. 生态系统：Web Components有一个活跃的生态系统，包括大量的第三方库和工具，可以帮助开发者更方便地创建和使用Web Components。这使得开发更加高效和便捷。

Web Components是一种强大的技术，它可以提供一种模块化、可复用和可维护的方式来构建Web应用。它的好处和优点使得它逐渐成为现代Web开发的重要组成部分。

在Angular中使用Web Components有以下优势：

1. 组件化开发：Angular的核心思想就是组件化开发，而Web Components也是一种基于组件化的开发模式。使用Web Components可以将应用程序拆分成多个独立的组件，每个组件都有自己的模板、样式和行为。这样可以提高代码的可维护性和复用性。

2. 平台无关性：Web Components是一种跨平台的技术，可以在任何现代浏览器中使用，而不需要额外的插件或框架支持。这意味着使用Angular开发的组件可以在其他框架或项目中重用，提高开发效率。

3. 封装性：Web Components使用Shadow DOM将组件的样式和模板封装起来，与外部环境隔离。这样可以防止组件样式和结构被外部环境所影响，提高组件的独立性和安全性。

4. 生态系统：Web Components拥有庞大的生态系统，有很多第三方库和工具可以用来开发和扩展组件。使用这些工具可以提高开发效率，并且可以与其他Web Components库或框架无缝集成。

使用Web Components可以将Angular中的组件化开发模式与跨平台、封装性和生态系统等优势相结合，提高开发效率和组件的可维护性。

---

一、Material Web Components

Material Design是由Google设计师和开发人员构建和支持的设计系统。构建Material应用程序和组件的指南发布在material.io上。

最新版本Material 3可以实现个性化、自适应和表现力强的体验，包括动态颜色和增强的可访问性，以及大屏幕布局和设计令牌的基础。

Web组件是具有封装样式和行为的自定义HTML元素。它们适用于许多不同的框架（如Lit、React、Vue和Svelte），以及Web环境（如Eleventy、Wordpress和Ruby on Rails）。

这个库中的许多组件都可以直接替换浏览器元素，例如<button>和<input>。

<!-- Browser elements -->
<form>
  <label>
    Email
    <input type="email" name="email" required>
  </label>
  <label>
    Subscribe
    <input type="checkbox" name="subscribe">
  </label>

  <button type="reset">Reset</button>
  <button>Submit</button>
</form>

<!-- Material elements -->
<form>
  <md-outlined-text-field label="Email" type="email"
      name="email" required></md-outlined-text-field>
  <label>
    Subscribe
    <md-checkbox name="subscribe"></md-checkbox>
  </label>

  <md-text-button type="reset">Reset</md-text-button>
  <md-outlined-button>Submit</md-outlined-button>
</form>

二、使用步骤

新建项目，结构为

tauri或者直接创建纯前端项目均可。

也就是正常的Angular项目，本人目前使用的版本号为最新的Angular 16

配置启用自定义元素

在app.module.ts文件中，加入

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]

然后导入需要使用的Web component组建

import { MdCheckbox } from '@material/web/checkbox/checkbox.js'
import { MdFilledButton } from '@material/web/button/filled-button.js'
import { MdOutlinedButton } from '@material/web/button/outlined-button.js';
import { MdElevatedButton } from '@material/web/button/elevated-button.js';
import { MdFilledField } from '@material/web/field/filled-field';

组件导入写在

bootstrap: [
    AppComponent, 
    // 以下为导入的组件
    MdCheckbox,
    MdFilledButton,
    MdOutlinedButton,
    MdElevatedButton,
    MdFilledField
  ],

然后就可以在Web项目中畅快的使用MWC了

<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

贴出源码
app.component.css

:root {
  font-family: 'Roboto', system-ui, sans-serif;
}

label {
  display: flex;
  align-items: center;
}

app.component.html

<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-mwc';
}

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MdCheckbox } from '@material/web/checkbox/checkbox.js'
import { MdFilledButton } from '@material/web/button/filled-button.js'
import { MdOutlinedButton } from '@material/web/button/outlined-button.js';
import { MdElevatedButton } from '@material/web/button/elevated-button.js';
import { MdFilledField } from '@material/web/field/filled-field';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [
    AppComponent, 
    MdCheckbox,
    MdFilledButton,
    MdOutlinedButton,
    MdElevatedButton,
    MdFilledField
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
  
})
export class AppModule { }