将Angular 2 Material 2工具栏实现为模块

Question

我正在尝试学习如何在我们的项目中使用Angular 2和Material 2。我了解如何通过创建组件并将组件添加到NgModule声明来实现md-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>

应用模块：

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