typescript 角形材料在某些部件中不起作用

idfiyjo8  于 2023-03-04  发布在  TypeScript
关注(0)|答案(2)|浏览(143)

很抱歉,如果这很难理解,但是我不明白为什么我的代码在一些组件中工作,而在其他组件中不工作。我将MdButtonModule导入到我的app.module.ts文件中,并能够让以下代码在我的app.component.html文件中工作:

<button md-button>Click Me!</button>

当我在一个名为shifts.component.html的组件中尝试相同的代码时,它没有工作。shifts.component.ts被导入到shifts.module.ts中,shifts.module.ts被导入到app.module.ts中。结果我不得不将MdButtonModule导入到shifts.module.ts中,以便在shifts.component.html中使用角形材质按钮。如果我在app.module.ts中导入任何组件,我是否可以在其中使用角形材质按钮?有些事情似乎不对。我不明白什么?

vm0i2vca

vm0i2vca1#

这条信息取自Official Angular Material

步骤3:导入组件模块

Import the NgModule for each component you want to use:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

或者,您可以创建一个单独的NgModule来导入您将在应用程序中使用的所有Angular 材料组件。然后,您可以在任何您想要使用这些组件的地方包含此模块。

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

无论使用哪种方法,请确保在导入Angular的BrowserModule之后导入Angular Material模块,因为导入顺序对NgModules很重要。

ycl3bljg

ycl3bljg2#

如果你决定按照@Nour的建议创建一个单独的模块,这里有一个更好的方法,这样你就不会在导入/导出中重复MatModules。

材料.模块.ts

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatSnackBarModule } from '@angular/material/snack-bar';

const material: any[] = [
  MatTableModule,
  MatTabsModule,
  MatSnackBarModule
]

@NgModule({
  imports: [material],
  exports: [material]
})
export class MaterialModule { }

相关问题