3

注意：我不使用 Angular-Cli

其他angular2 -material 组件似乎需要 OverlayModule。

zone.js:355 未处理的承诺拒绝：./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 ??
    };
  }
}

应用模块.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 ]
  };
}

Plunker 示例

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

不要做其中任何一个。不在共享模块中。下面是可以的，虽然我不认为它应该这样使用

@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 回答