Question

注意：我不使用Angular-Cli

其他angular2材质组件似乎需要

OverlayModule 。

zone.js：355未处理的Promise拒绝：./AppComponent类中的错误 AppComponent - 内联模板：2：2引起：没有覆盖的提供者！ ;区域：;任务：Promise.then;值：

我安装了angular2-material的所有包。

sytemjs.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',
    },

我将 sharedModule 用于angular2-material组件，以便它们随处可用。

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>

Answer 1

有几种选择：

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 ]
  };
}

<强> Plunker Example

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

Answer 2

只需添加到accepted answer即可。

首先要提到的是forRoot()不应导入共享模块，原因是here。现在应该提取它们的提供者以添加共享模块@NgModule.providers

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

不要做其中任何一个。不在共享模块中。以下是可以的，虽然我不认为它意味着以这种方式使用

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

就像我说的那样，它可以工作，但它只是看起来很奇怪。也许更优雅的解决方案是材料本身提供的解决方案。你看快照（截至目前 - 将在下一个版本中），你会看到他们在哪里制作module that consolidated all the MD modules。也许只是做他们正在做的事情，但不是添加所有模块，只需添加你使用的模块

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 ]

并在app模块中

imports: [ MaterialModule.forRoot() ]

风格方面，我想我可能会走这条路。

如何在Angular2 App中使用OverlayModule（angular2-material）

2 个答案: