將Angular 2 Material 2 Toolbar作爲模塊實施

我正試圖學習如何在我們的項目中使用Angular 2和Material 2。我知道如何通過創建組件並將組件添加到NgModule聲明來實現md-toolbar作爲組件。這非常簡單。但是我無法弄清楚如何將工具欄作爲模塊中的一個組件實現。當我嘗試這樣做時，我收到以下錯誤。將Angular 2 Material 2 Toolbar作爲模塊實施

我的代碼如下：

工具欄模塊：

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>

APP模塊：

// 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>

我覺得我錯過了一些簡單的東西，但一直沒能弄清楚。任何幫助將不勝感激，因爲這種將事物分解成模塊的模式對我來說很常見。

來源

2016-11-26 Aaron

子組件不會繼承父組件的模塊導入。因爲你必須在ToolbarModule

來源

2016-11-26 16:27:27 philipooo

以內導入MaterialModule.forRoot()真棒，工作。感謝您的幫助。 – Aaron

將Angular 2 Material 2 Toolbar作爲模塊實施

回答

相關問題