0

プロジェクトでAngular 2を使用しているため、Material 2でAngular 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>

簡単なことを見逃したような気がしますが、それを理解できていません。物事をモジュールに分割するこのパターンは私にとって一般的であるため、どんな支援も大歓迎です。

4

1 に答える 1

0

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

于 2016-11-26T16:27:27.160 に答える