将路由器链接反应到材料 UI 组件 - HTML

如果您正在使用材料 UI 组件来开发您的 Web 应用程序，您可能想通过材料 UI 组件中的表单组件来处理用户输入。这需要将表单数据与路由器链接反应起来。

在本教程中，我们将介绍如何在 HTML 中实现此目标，使用材料 UI 组件的文本框和选择框以及 Angular 路由器。以下是一个代码片段，展示了如何在 Angular 中实现此目标。

### HTML

```html
<form>
  <mat-form-field>
    <input matInput [(ngModel)]="title" name="title" placeholder="Title">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput [(ngModel)]="description" name="description" placeholder="Description"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select [(ngModel)]="category" name="category">
      <mat-option *ngFor="let category of categories" [value]="category">
        {{category}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <button mat-raised-button color="primary" (click)="submit()">Save</button>
</form>

在这个 HTML 片段中，我们首先创建了一个表单。在表单中，我们使用了材料 UI 组件的文本框和选择框来接收用户输入。

我们使用 [(ngModel)] 指令将输入内容绑定到我们的组件中定义的变量，这些变量将在我们的路由器链接中使用。

TypeScript

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

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent {
  title: string;
  description: string;
  category: string;

  categories: string[] = ['Sports', 'Technology', 'Music'];

  constructor(private router: Router) {}

  submit() {
    const data = {
      title: this.title,
      description: this.description,
      category: this.category
    };

    this.router.navigate(['/blog', 'add'], { queryParams: data });
  }
}

在 TypeScript 代码中，我们定义了一个具有三个属性的组件 - title、description 和 category。这些属性在 HTML 片段中使用 [(ngModel)] 指令进行绑定。

我们还定义了一个名为 categories 的数组，用于展示在选择框中可用的选项。最后，在 submit 方法中，我们获取所有表单数据并将其传递给路由器链接。这将导航到带有我们的数据参数的路由。

总结

使用材料 UI 组件和 Angular 能够有效地处理表单输入和路由导航。此教程表明了如何在 HTML 和 TypeScript 中实现此目标，并以明确的方式显示了如何实现反应路由器链接。