0

で使用Angular 2 rc 5していng2-Material alpha 7-2ます。

基本的な問題は<md-icon svgIcon='icon'>、同じ svg ファイルから同じアイコンを表示するために使用すると、あるコンポーネントでは機能するが、ルートに提供されているにMdIconModuleもかかわらず、他のコンポーネントでは機能しないことです。MdIconRegistryAppModule

問題を再現するには

  • このプランカーを開く
  • MdIconModuleとが の一部としてメインにMdIconRegistryインポートされていることに注意してください。MaterialModule.forRoot()AppModule
  • を開き、アイコンを登録するためAppComponentの呼び出しに注意してくださいaddSvgIconSet()
  • テンプレートで<md-icon svgIcon='ic_account_box_24px'>は、アイコンを表示するために使用されます。ビューでは、アイコンがナビゲーション バーの上に正常に表示されます。
  • app/crisis-center/crisis.list.componentビューでクライシス センターを開いて開きます。
  • テンプレートに注意してください。同じもの<md-icon>が存在します。ただし、ビューのクライシス リストの上にはアイコンが表示されません。ブラウザー開発ツールの DOM インスペクターは、angular パーサーがそれを angular コンポーネントとして認識さえしなかったことを示しています (dom では、コードとまったく同じままです)

アイコン モジュールとサービスをルート モジュールにインポートしたので、サービスはアプリ全体で使用できるシングルトンになると予想していました。そのサービスを使用してアイコンをiconRegistry.addSvgIconSet()bootstrappedに登録するAppComponentため、アプリ全体でアイコンにアクセスできると予想していました。

PS: これは、私が昨日報告し​​た内容に関連している可能性がありますが、その場合、アプリがクラッシュします。この場合、アイコンは表示されません。

4

2 に答える 2

0 
import { NgModule, ModuleWithProviders  }       from '@angular/core';
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdCoreModule } from '@angular2-material/core';
import { MdInputModule } from '@angular2-material/input';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdMenuModule } from '@angular2-material/menu';
import { MdIconModule} from '@angular2-material/icon';

@NgModule({     
    exports:      [
      MdButtonModule,
      MdCardModule,
      MdCheckboxModule,
      MdCoreModule,
      MdInputModule,
      MdProgressCircleModule,
      MdToolbarModule,
      MdMenuModule,
      MdIconModule
    ]
})
export class MaterialModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MaterialModule,
      providers: [
      ]
    };
  }

}
于 2016-08-20T06:31:01.280 に答える