Question

我现在将其切换为更模块化和更好的设计，但仍然存在html文件无法看到Material组件的问题。

我所做的是从app.module中删除了所有内容。我有一个共享组件，可以导入和导出“材质”组件我已经在datafile.module中声明了共享组件，还声明了datafile列表组件和html ....

文件的层次结构如下：

app / shared / edxMoaterailModule

app / datafile / datafile.module.ts

app / datafile / datafile-list / datafile-list.component（.ts和.html）

我认为应该没有用，所以如何使共享材料模块在datafile-list组件中可用？

edxMaterailModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule,  } from '@angular/material/card';
import 'hammerjs';

@NgModule({
  imports: [CommonModule, MatCardModule, MatButtonModule],
  exports: [MatCardModule, MatButtonModule]
})
export class EDXMaterialModule {
}

datafile.module.ts

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DatafileDetailComponent } from './datafile-detail/datafile-detail.component';
import { DatafileListComponent } from './datafile-list/datafile-list.component';

import { DatafileLoader } from './datafile-loader.service';

import { EDXMaterialModule } from '../shared/edxMaterialModule';

const routes: Routes = [
  { path: '', component: DatafileListComponent },
  { path: ':id', component: DatafileDetailComponent }

];

@NgModule({
  declarations: [DatafileListComponent, DatafileDetailComponent, EDXMaterialModule],
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(routes),
  ],
  providers: [DatafileLoader]
})
export class DatafileModule { }

Answer 1

似乎在声明datafile-list-component时存在问题：我看不到您在某处声明了它。如果希望datafile-list-component看到Material组件，则需要在导入Material组件的模块中声明该组件，如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { EDXMaterialModule } from './shared/edxMaterialModule';
import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule, MatMenuModule } from '@angular/material';
import { MatCardModule,  } from '@angular/material';
import { DatafileListComponent } from 'your-location';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, FlexLayoutModule, EDXMaterialModule
            , MatCardModule, MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule, MatMenuModule],
  declarations: [DatafileListComponent] // <-- ADD THIS
  bootstrap: [AppComponent]
})
export class AppModule {}

我不一定必须是AppModule-想法是组件声明和Material模块导入应该在同一模块中。

无法使用材料组件

1 个答案: