Question

为避免从角度材质导入模块，我创建了一个单独的角度模块AppCustomMaterialModule，并将其导入主模块AppModule。该主模块（AppMenuComponent）的一个组件应使用其中一个导出的角度材料模块。但是，虽然在AppCustomMaterialModule中导入了AppModule，但却无法在AppMenuComponent中找到。直接导入有效。错误信息： Module ...app-custom-material-module/app-custom-material.module' has no exported member 'MatMenuTrigger' 如果按预期使用AppCustomMaterialModule，我需要做什么？

结构：

|____app
| |____app.component.html
| |____app.component.ts
| |____app.component.spec.ts
| |____app.module.ts
| |____app-custom-material-module
| | |____app-custom-material.module.ts
| |____app-menu
| | |____app-menu.component.html
| | |____app-menu.component.spec.ts
| | |____app-menu.component.css
| | |____app-menu.component.ts

AppCustomMaterialModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatMenuTrigger } from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    MatMenuTrigger
  ],
  exports: [
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    MatMenuTrigger
  ],
  declarations: []
})
export class AppCustomMaterialModule { }

主要模块＆＃34; AppModule＆＃34;：

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppCustomMaterialModule } from './app-custom-material-module/app-custom-material.module';
import { AppMenuComponent } from './app-menu/app-menu.component';

@NgModule({
  declarations: [
    AppComponent,
    AppMenuComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppCustomMaterialModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件＆＃34; AppMenuComponent＆＃34;：

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
// import { MatMenuTrigger } from "@angular/material/menu"; <== direct import works
import { MatMenuTrigger } from '../app-custom-material-module/app-custom-material.module';

@Component({
  selector: 'app-menu',
  templateUrl: './app-menu.component.html',
  styleUrls: ['./app-menu.component.css']
})
export class AppMenuComponent implements OnInit {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

Angular模块导入数组与ES 2015导入语句之间存在差异。

通过使用共享模块（AppCustomMaterialModule），您不需要将每个Material Design模块添加到需要它的每个Angular模块的imports数组中。如您所见，您只需将AppCustomMaterialModule添加到imports数组即可。

ES 2015进口声明与此无任何关系。您仍然需要导入将在每个文件中使用的每个类。这是JavaScript的要求（特别是Angular）。

希望这是有道理的。

Answer 2

您不导入MenuTrigger不是模块。您可以看到角度style guide和命名约定。文件名是自我描述的。导入数组仅用于模块。

用于角材料的单独模块

2 个答案: