所以在我之前的問題中，我詢問了 Angular 中的材質 UI 庫。遇到@angular/material它似乎足夠好，但我無法通過子模塊實作它（對不起，如果我在術語上不正確。我對 Angular 很陌生）。
這是源代碼：
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapModule } from './components/map/map.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MapModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
map.module.ts
import { NgModule } from '@angular/core';
import { MapComponent } from './map.component';
import { MatCardModule } from '@angular/material/card'
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
MapComponent
],
imports: [
BrowserModule,
MatCardModule
],
providers: [],
bootstrap: [MapComponent]
})
export class MapModule { }
這里的問題是，即使我能夠<mat-card>按照檔案中的說明進行訪問@angular/material，它也沒有顯示在我的螢屏上的任何位置。
可能是什么問題呢？
uj5u.com熱心網友回復：
您創建一個用于匯入所有材料模塊的模塊。對于您的情況，它是墊卡。
材料.module.ts
import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material/card';
// import all the required material modules
@NgModule({
exports: [
MatCardModule,
]
})
export class MaterialModule {}
并匯入
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module.ts';
import { MapModule } from './components/map/map.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MapModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
視圖檔案中的用法
<mat-card>Sample</mat-card>
創建單獨的材料模塊是最佳實踐。
uj5u.com熱心網友回復：
要使其在全球范圍內作業，您需要將 MatCardModule 匯入 AppModule。但是您在這里要問的是有一個子模塊 MapModule，匯入和匯出 MatCardModule，然后您需要主模塊 AppModule 來匯入 MapModule 本身。
MatCardModule -> MapModule -> AppModule
地圖模塊
import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card'
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
],
imports: [
BrowserModule,
MatCardModule
],
providers: [
{provide: MatCardModule}
],
bootstrap: [],
exports: [
MatCardModule
]
})
export class MapModule { }
應用模塊
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MapModule } from './map/map.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
MapModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
這是一個作業示例：https ://stackblitz.com/edit/angular-10-material-module-jawrve?file=src/app/app.module.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421056.html
標籤：