Angular Material list | 五个mat-list实例

这篇文章涵盖了Angular材质列表的教程和例子。

Angular material list是一个容器元素，用于显示在它里面的UI元素。以下的UI组件也可以用它来包装。

基本的材料列表UI组件包含以下内容

• 列表容器是一个必要的父容器，用于容纳一组元素或列表项。
• listitem包含作为子元素的列表项。

在这篇博文中，列出了使用angular material的材料列表的各种使用实例。

这篇文章不包括如何创建一个angular应用程序，它包括在angular应用程序中添加材料列表代码。

Angular材料列表的基本例子

material list是一个UI元素，用于在列表容器中显示对象的列表。

matList 是一个选择器，用于在UI页面中显示列表的材料风格。

列表相关的组件以 "MatListModule "的形式内置在angular模块中。

导入angular材料列表模块

你只需要在你的应用程序中导入MatListModule 模块。你可以在你的组件、app.module.ts或共享公共模块中添加导入。

我在app.module.ts文件中加入了这个模块。

import { NgModule } from '@angular/core';
import {MatListModule} from '@angular/material/list';

@NgModule({
  imports:      [ MatListModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  providers:[],
  exports:[]
})
export class AppModule { }

现在，应用程序可以访问你的组件和模块中的以下组件和指令MatListModule :

• mat-list,matList选择器等...
• mat-action-list和mat-list-item组件
• matList指令

下一步是什么？我们将看一些如何使用材料清单的例子。

材料列表的基本例子

我们将使用mat-list 组件在angular中创建一个基本的列表元素。

下面是一个基本组件

• mat-list是一个父标签，使其成为列表，配置的角色是列表。
• 它包含mat-list-item ，作为一个子标签，将角色分配给listitem

basic-list.component.html

<h3>
  Basic Material List
</h3>

<mat-list role="list">
  <mat-list-item role="listitem">INDIA</mat-list-item>
  <mat-list-item role="listitem">USA</mat-list-item>
  <mat-list-item role="listitem">GERMANY</mat-list-item>
</mat-list>

材料列表还提供了导航列表，导航链接是可以使用锚标签点击的链接。

Angular模板html组件

<h3>
  Basic Material Navigation List
</h3>
<mat-nav-list>
  <a mat-list-item [href]="link.url" *ngFor="let link of links">
    {{ link.title }}
  </a>
</mat-nav-list>

Angular typescript组件

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

@Component({
  selector: "app-basic-list",
  templateUrl: "./basic-list.component.html",
  styleUrls: ["./basic-list.component.css"]
})
export class BasicListComponent implements OnInit {
  public links: Array = [
    { title: "book1", url: "/basic" },
    { title: "book2", url: "/basic1" },
    { title: "book3", url: "/basic2" },
    { title: "book4", url: "/basic3 " }
  ];
  constructor() {}

  ngOnInit() {}
}

输出: