角度材用の個別モジュール

Question

角度材からモジュールをインポートするのを避けるため、別の角度モジュールAppCustomMaterialModuleを作成し、メインモジュールAppModuleにインポートしました。そのメインモジュールのコンポーネント（AppMenuComponent）は、エクスポートされた角度材料モジュールの1つを使用する必要があります。ただし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 { } 

メインモジュール "AppModule"：

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 { } 

成分 "AppMenuComponent"：

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 module imports配列とES 2015 import文の間に違いがあります。

共有モジュール（AppCustomMaterialModule）を使用することで、各材料設計モジュールを、それを必要とする各角度モジュールのインポート配列に追加する必要はありません。ご覧のとおり、AppCustomMaterialModuleをインポート配列に追加するだけです。

ES2015のインポートステートメントは、これとは何の関係もありません。すべてのファイルで使用する各クラスをインポートする必要があります。これはJavaScript（Angularではなく）の要件です。

希望はこれが理にかなっています。

Answer 2

MenuTriggerのnotモジュールをインポートしません。角度style guideと命名規則を見ることができます。ファイル名は自己記述型です.Imports配列はモジュール用です。