Angular Material 设计 7，未找到组件

Question

我对 Angular 7 和 CLI 很熟悉，但对使用 material 设计组件还是陌生的。

我按照入门说明使用 Angular CLI 7.1 安装和配置。

我为 material 创建了一个新模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule,
  MatCheckboxModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [MatButtonModule, MatCheckboxModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule]
})
export class MaterialModule {}

我将此模块导入到我的应用程序模块中：

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

import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';

import { AppComponent, AppRoutingModule } from '@app/index';

import { SharedModule } from '@app/shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    LoadingBarHttpClientModule,
    LoadingBarRouterModule,
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  exports: [MaterialModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

现在，我的主页有一个 "home" 模块，就像在我们的应用程序中一样：

import { NgModule } from '@angular/core';
import { SharedModule } from '@app/shared/shared.module';
import { HomeRoutingModule, HomeComponent } from '@app/home';

@NgModule({
  imports: [SharedModule, HomeRoutingModule],
  declarations: [HomeComponent],
  exports: []
})
export class HomeModule {}

主页组件：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

然后我尝试将 material 按钮添加到此组件的 html:

<div class="container-fluid" role="main">
  <div class="row">
    <div class="col"><h1>Home</h1></div>
    <md-button>foo</md-button>
  </div>
</div>

但是编译不通过，报错：

ERROR in : 'md-button' is not a known element:
1. If 'md-button' is an Angular component, then verify that it is part of this module.
2. If 'md-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
 <div class="row">
  <div class="col"><h1>Home</h1></div>
   [ERROR ->]<md-button>foo</md-button>
  </div>
 </div>
")

根据经验，我知道某些地方没有导入或导出某些东西，但我在文档中没有看到任何解决这个问题的方法。

Answer 1

Angular Material 没有 <md-button> 组件，<md-button>foo</md-button>这是错误的。

你必须像这样使用 mat-button 指令 <button mat-button>foo</button> 我创建了以下项目以便更好地理解 https://stackblitz.com/edit/angular-byco65

更多详情，请查看：https://material.angular.io/components/button/overview

Answer 2

使用 foo 而不是使用或任何其他 HTML 它会工作..

Angular Material 设计 7，未找到组件

Angular Material design 7, component not found

angular-material

angular

angular-material-6