angularjs 嵌套模块中声明的组件未应用材质样式

gab6jxml 于 2023-02-03 发布在 Angular

关注(0)|答案(1)|浏览(166)

在图片中，你可以看到一个按钮在两个点上添加了完全相同的标记。绿色按钮添加在我的app.component.html中，它在根app.module.ts中声明。该模块也是我导入MatButtonModule和嵌套TodosModule的地方。
红色框包含了我的todos.component.html，它是在我的todos.module.ts中声明的。你可以看到这个按钮没有应用材质样式。为什么会这样？我的嵌套模块没有使用我的根模块中导入的样式吗？
按钮html：

<button mat-raised-button color="primary">Add</button>

app.module.ts

import { MatButtonModule } from "@angular/material/button";
import { TodosModule } from "./todos/todos.module";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatButtonModule,
    TodosModule,
  ],
})
export class AppModule {}

todos.module.ts

import { AddToDosComponent } from "./components/add-to-dos/add-to-dos.component";

@NgModule({
  declarations: [AddToDosComponent],
})
export class TodosModule {}

angularjs

来源：https://stackoverflow.com/questions/75279555/component-declared-in-nested-module-doesnt-have-material-styles-applied

1条答案

按热度按时间

8e2ybdfx1#

MatButtonModule不工作的原因是它仅适用于AppModule（范围）。
导入AppModule（根模块）中的MatButtonModule将不会继承给子/嵌套模块。
您应该实现一个SharedModule并将其导入到所需的每个模块中。
material-theme.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  exports: [MatButtonModule],
})
export class MaterialThemeModule {}

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialThemeModule } from './material-theme.module';

@NgModule({
  exports: [CommonModule, MaterialThemeModule],
})
export class SharedModule {}

to-dos.module.ts
一个二个一个一个
Demo @ StackBlitz

赞(0）回复(0）举报 2023-02-03

我来回答

angularjs 嵌套模块中声明的组件未应用材质样式

1条答案

相关问题

热门标签

最新问答