Угловой материал дизайн 7, компонент не найден - PullRequest
Новая
       4

Угловой материал дизайн 7, компонент не найден

0 голосов
/ 04 декабря 2018

У меня есть опыт работы с 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>
")

По опыту я знаю, что что-то не импортируется и не экспортируется, но я не вижу в документах ничего, чтобы решить эту проблему.

1 Ответ

0 голосов
/ 04 декабря 2018

Угловой материал не имеет <md-button> компонента, <md-button>foo</md-button> Это неправильно.

Вы должны использовать директиву с кнопками, как эта <button mat-button>foo</button> Я создал следующий проект для лучшего понимания https://stackblitz.com/edit/angular-byco65

для более подробной информации, пожалуйста, проверьте: https://material.angular.io/components/button/overview

...