角2を実装する2ツールバーをモジュールとして

Question

私たちがプロジェクトで使用しているように、材料2で角度2を使用する方法を習得しようとしています。私は、コンポーネントを作成し、そのコンポーネントをNgModule宣言に追加することによって、コンポーネントとしてmd-ツールバーを実装する方法を理解しています。これはかなり簡単です。しかし、モジュール内のコンポーネントとしてツールバーを実装する方法を理解することはできません。私がそうしようとすると、私は次のエラーを受け取ります。

私のコードは次のとおりです。

ツールバーモジュール：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { ToolbarComponent } from './toolbar.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ 
    ToolbarComponent 
    ], 
    providers: [ 

    ], 
    exports: [ 
    ToolbarComponent 
    ] 
}) 

export class ToolbarModule {} 

ツールバーコンポーネント：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'toolbar', 
    templateUrl: './toolbar.component.html', 
    styleUrls: ['./toolbar.component.scss'] 
}) 

export class ToolbarComponent implements OnInit { 

    ngOnInit() { 
    console.log('Toolbar'); 
    } 
} 

ツールバーコンポーネントHTML：

<md-toolbar> 
    <span>My Application Title</span> 
</md-toolbar> 

アプリケーションモジュール：

// Application Dependencies 
import { NgModule, ApplicationRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 

// Application Modules 
import { MaterialModule } from '@angular/material'; 
import { ToolbarModule } from './modules/toolbar/toolbar.module'; 

// Application Components 
import { AppComponent } from './app.component'; 

// Application Pages 
import { HomeComponent } from './pages/home/home.component'; 
import { AboutComponent } from './pages/about/about.component'; 

// Application Services 
import { routing } from './app.routing'; 
import { removeNgStyles, createNewHosts } from '@angularclass/hmr'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    routing, 

    MaterialModule.forRoot(), 
    ToolbarModule 
    ], 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    AboutComponent 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 
    constructor(public appRef: ApplicationRef) {} 
    hmrOnInit(store) { 
    console.log('HMR store', store); 
    } 
    hmrOnDestroy(store) { 
    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); 
    // recreate elements 
    store.disposeOldHosts = createNewHosts(cmpLocation); 
    // remove styles 
    removeNgStyles(); 
    } 
    hmrAfterDestroy(store) { 
    // display new elements 
    store.disposeOldHosts(); 
    delete store.disposeOldHosts; 
    } 
} 

アプリケーションコンポーネント：

import { Component } from '@angular/core'; 
import '../style/app.scss'; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'], 
}) 

export class AppComponent { 
    url = 'https://github.com/preboot/angular2-webpack'; 

    constructor() { 
    // Do something with api 
    } 
} 

アプリケーションコンポーネントHTML：

<header> 
    <toolbar></toolbar> 
</header> 
<main> 
    <h1>Hello</h1> 
    <router-outlet></router-outlet> 
</main> 
<footer> 
    <p>Footer</p> 
</footer> 

シンプルなものを見逃してしまったような気がしますが、それを理解することはできませんでした。物事をモジュールに分けるこのパターンが私には共通しているので、どんな支援も大いに評価されます。

Answer 1

子コンポーネントは、親コンポーネントのモジュールインポートを継承しません。そのため、MaterialModule.forRoot()をToolbarModule