如何使用 Angular 11.0 制作多选下拉菜单

简介

Angular 是一款流行的基于 TypeScript 的前端框架，它提供了很多实用的工具和组件。其中，下拉菜单是常见的 UI 组件之一。在某些场合下，我们需要制作多选下拉菜单，以便用户可以同时选择多个选项。本文将介绍如何使用 Angular 11.0 制作多选下拉菜单。

步骤

1. 安装 Angular CLI

如果您还未安装 Angular CLI，可以使用以下命令安装：

npm install -g @angular/cli

2. 创建项目

使用以下命令创建 Angular 项目：

ng new my-app

其中，my-app 是项目的名称。

3. 创建多选下拉菜单组件

使用以下命令创建多选下拉菜单组件：

ng generate component multi-select

然后进入 src/app/multi-select 目录，编辑 multi-select.component.html 文件，添加以下内容：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select options
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li *ngFor="let option of options" [ngClass]="{'selected': option.selected}" (click)="toggleOption(option)">
      <a href="#">
        <span class="checkbox"></span>
        <span class="text">{{ option.text }}</span>
      </a>
    </li>
  </ul>
</div>

上述代码使用 Bootstrap CSS 框架绘制多选下拉菜单的样式。options 数组用于存储各个选项的信息。toggleOption 函数用于切换选项的选择状态。

接下来，在 multi-select.component.ts 中添加以下代码：

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

export interface Option {
  text: string,
  value: any,
  selected: boolean
}

@Component({
  selector: 'app-multi-select',
  templateUrl: './multi-select.component.html',
  styleUrls: ['./multi-select.component.css']
})
export class MultiSelectComponent implements OnInit {

  options: Array<Option> = [
    { text: 'Option 1', value: 'option1', selected: false },
    { text: 'Option 2', value: 'option2', selected: false },
    { text: 'Option 3', value: 'option3', selected: false },
    { text: 'Option 4', value: 'option4', selected: false },
    { text: 'Option 5', value: 'option5', selected: false },
  ];

  constructor() { }

  ngOnInit(): void {
  }

  toggleOption(option: Option) {
    option.selected = !option.selected;
  }

}

上述代码定义了一个接口 Option，表示每个选项。options 数组初始化了五个选项，初始的 selected 状态都为 false。toggleOption 函数用于切换某个选项的 selected 状态。

4. 使用多选下拉菜单组件

在 app.component.html 中添加以下内容：

<app-multi-select></app-multi-select>

现在，运行应用：

ng serve -o

就可以看到多选下拉菜单了。

总结

本文介绍了使用 Angular 11.0 制作多选下拉菜单的步骤。通过本文的学习，您可以了解到如何使用 Angular 组件、模板和 TypeScript 代码编写多选下拉菜单组件，并且使用 Bootstrap CSS 框架绘制样式。