如何在子组件中导入模块 [Angular]

Question

所以在我之前的问题中，我询问了 material UI 库 Angular。遇到 @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 { }

这里的问题是，即使我能够访问 @angular/material 文档中提到的 <mat-card>，它也没有出现在我屏幕上的任何地方。

可能是什么问题？

Answer 1

您创建了一个用于导入所有 material 模块的模块。对于你的情况，它是垫卡。

material.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>

创建一个单独的 material 模块是最佳做法。

Answer 2

要使其在全球范围内运行，您需要将 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 { }

AppModule

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%2Fapp%2Fapp.module.ts

如何在子组件中导入模块 [Angular]

How to import a module inside of a sub-component [Angular]

angular-material

angular

app.module.ts

map.module.ts