Question

我对Angular 7和CLI很有经验，但是对使用材料设计组件还是陌生的。

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

我为材料创建了一个新模块：

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 {}

现在，像往常一样，在我的应用程序中，我的主页有一个“主页”模块：

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() {}
}

然后我尝试向该组件的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>这是错误的。

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

有关更多详细信息，请检查：https://material.angular.io/components/button/overview

Answer 2

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

角材料设计7，找不到组件

2 个答案: