3

注：Angular-Cliは使用しません

OverlayModuleは、他の angular2-material コンポーネントに必要なようです。

zone.js:355 未処理の Promise 拒否: ./AppComponent クラス AppComponent のエラー - インライン テンプレート:2:2 原因: オーバーレイのプロバイダーがありません! ; ゾーン： ; タスク: Promise.then ; 価値：

angular2-material からすべてのパッケージをインストールしました。

systemjs.config.js

 map: {
      // our app is within the app folder
      app: 'dist',
      ...
      ...
      '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js',
      '@angular2-material/button': 'npm:@angular2-material/button/button.umd.js',
      '@angular2-material/menu': 'npm:@angular2-material/menu/menu.umd.js',
      '@angular2-material/icon': 'npm:@angular2-material/icon/icon.umd.js',
      _____________________________________________________________________
      /*>>>>>   DO I NEED TO MAP ANYTHING FOR OVERLAY HERE?  <<<<<< */
      ______________________________________________________________________
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },

angular2-material コンポーネントにsharedModuleを使用しているため、どこでも使用できます。

shared.module.ts

import {MdButtonModule } from '@angular2-material/button';
import {MdIconModule} from '@angular2-material/icon';
import {MdMenuModule} from '@angular2-material/menu';
import {MdIconRegistry} from '@angular2-material/icon';

@NgModule({
  imports:      [ CommonModule ],
  declarations: [],
  exports:      [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule],
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ MdIconRegistry ]  //>>>>> DO I NEED TO ADD ANYTHING HERE ??
    };
  }
}

App.Module.ts

@NgModule({
  imports:      [ BrowserModule,SharedModule.forRoot()],  
  ...
})

HTML:

<button md-icon-button [md-menu-trigger-for]="menu">
   <md-icon>more_vert</md-icon>
</button>

<md-menu #menu="mdMenu">
    <button md-menu-item> Refresh </button>
    <button md-menu-item> Settings </button>
    <button md-menu-item> Help </button>
    <button md-menu-item disabled> Sign Out </button>
</md-menu>
<button md-raised-button>Button</button>
4

2 に答える 2

4

いくつかのオプションがあります:

  • 1)OverlayModule以下に示すように、共有モジュールにインポートしてみてください。

shared.module.ts

import {OverlayModule } from '@angular2-material/core';
@NgModule({
  imports:      [ CommonModule, OverlayModule.forRoot() ], <== here
  declarations: [],
  exports:      [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule],
})
export class SharedModule {

  • 2）メインモジュールにインポートできます

  • 3) または以下を使用します。

shared.module.ts

static forRoot(): ModuleWithProviders {
  return {
    ngModule: SharedModule,
      [ MdIconRegistry,  MdMenuModule.forRoot().providers ]
  };
}

プランカーの例

  • 4) またはこの方法:

shared.module.ts

@NgModule({
  imports:      [ CommonModule, MdMenuModule.forRoot() ],
  declarations: [],
  exports:      [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule],
})
  • 5) プロバイダーを SharedModule に追加するだけです

shared.module.ts

 import {OVERLAY_PROVIDERS } from '@angular2-material/core';
 return {
   ngModule: SharedModule,
   providers: [ MdIconRegistry,  OVERLAY_PROVIDERS ]
 };

forRoot()常に ModuleWithProviders オブジェクトを返します。

export interface ModuleWithProviders {
  ngModule: Type<any>;
  providers?: Provider[];
}

export class MdMenuModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MdMenuModule,
      providers: OVERLAY_PROVIDERS,
    };
  }
}

https://github.com/angular/material2/blob/2.0.0-alpha.8/src/lib/menu/menu.ts#L21

于 2016-09-24T14:50:08.940 に答える
2

受け入れられた回答に追加するだけです。

最初に言及することは、ここでforRoot()述べた理由により、共有モジュールにインポートしないことです。それらからプロバイダーを抽出して、共有モジュールを追加する必要があります@NgModule.providers

@NgModule({
  imports: [ SomeModule.forRoot() ],
  providers: [ SomeModule.forRoot().providers ]
})
export class SharedModule {}

それらのいずれかをしないでください。共有モジュールではありません。以下はOKですが、このように使用することを意図しているとは思いません

@NgModule({})
export class SharedModule {
  static forRoot() {
    return {
      ngModule: SharedModule,
      providers: [ SomeModule.forRoot().providers ]
    }
  }
}

私が言ったように、それは問題ありません。動作しますが、奇妙に見えます。おそらく、より洗練されたソリューションは、Material 自体が提供するものです。スナップショットを見ると (現時点では - 次のリリースになります)、すべての MD モジュールを統合したモジュールが作成された場所がわかります。彼らがしていることをするだけかもしれませんが、すべてのモジュールを追加する代わりに、使用するモジュールを追加するだけです

const MATERIAL_MODULES = [
  MdButtonModule,
  MdIconModule,
  MdMenuModule
];

@NgModule({
  imports: [
    MdButtonModule.forRoot(),
    MdIconModule.forRoot(),
    MdMenuModule.forRoot()
  ],
  exports: MATERIAL_MODULES
})
export class MaterialRootModule {}

@NgModule({
  imports: MATERIAL_MODULES,
  exports: MATERIAL_MODULES
})
export class MaterialModule {
  static forRoot() {
    ngModule: MaterialRootModule
  }
}

そして、あなたの共有モジュールでは

exports: [ MaterialModule ]

そしてアプリモジュールで

imports: [ MaterialModule.forRoot() ]

スタイルに関しては、おそらくこのルートに行くと思います。

于 2016-09-24T15:43:45.467 に答える