Компонент Angular2 js не работает

Question

Я работаю над веб-приложением с Angular2, я разделяю определенные части, такие как заголовок, тело и нижний колонтитул на отдельные части, поэтому у меня есть следующая структура файла (не в том числе node_modules и т.д.):

|-Root 
|--|public 
|--|--|css 
|--|--|--|style sheets here 
|--|--|img 
|--|--|--|img's here 
|--|--|js 
|--|--|--|extra javascript here here 
|--|app 
|--|--|app.component.css 
|--|--|app.component.html 
|--|--|app.component.ts 
|--|--|app.module.ts 
|--|--|footer.component.html 
|--|--|footer.component.ts 
|--|--|header.component.html  <-- the element with problems 
|--|--|header.component.ts 
|--|index.html 
|--|main.ts 
|--|polyfills.ts 
|--|vendor.ts 

My JavaScript и CSS импортируются внутри поставщика, который выглядит следующим образом:

// Angular 2 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 

// RxJS 
import 'rxjs'; 

// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ... 
import '../public/css/animate.css'; 
import '../public/css/material.min.css'; 
import '../public/css/styles.css'; 

import '../public/js/material.min.js'; 

и мой header.component.html выглядит так:

<header class="mdl-layout__header mdl-layout__header--waterfall animated fadeInDown"> 
    <!-- Top row, always visible --> 
    <div class="mdl-layout__header-row"> 
     <!-- Title --> 
     <span class="mdl-layout-title">Title</span> 
     <div class="mdl-layout-spacer"></div> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
     <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp"> 
      <i class="material-icons">search</i> 
     </label> 
     <div class="mdl-textfield__expandable-holder"> 
      <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp"> 
     </div> 
     </div> 
    </div> 
    <!-- Bottom row, not visible on scroll --> 
    <div class="mdl-layout__header-row"> 
     <div class="mdl-layout-spacer"></div> 
     <!-- Navigation --> 
     <nav class="mdl-navigation animated slideInRight"> 
     <a class="mdl-navigation__link" href="">Home</a> 
     <a class="mdl-navigation__link" href="">About</a> 
     <a class="mdl-navigation__link" href="">Github</a> 
     <a class="mdl-navigation__link" href="">Download</a> 
     <a class="mdl-navigation__link" href="">Contact us</a> 
     </nav> 
    </div> 
</header> 
<div class="mdl-layout__drawer"> 
    <span class="mdl-layout-title">Title</span> 
    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">Home</a> 
     <a class="mdl-navigation__link" href="">About</a> 
     <a class="mdl-navigation__link" href="">Github</a> 
     <a class="mdl-navigation__link" href="">Download</a> 
     <a class="mdl-navigation__link" href="">Contact us</a> 
    </nav> 
</div> 

Описание этого заголовка можно найти here (прокрутите вниз, пока не увидите маленький серый текст с надписью «водопад»).

Как видите, нижняя часть этого заголовка должна скользить вверх при прокрутке вниз, она делает это, когда я помещаю заголовок внутри index.html напрямую, но не тогда, когда я использую header.component.html.

я, наконец, собрать все объекты в app.module.ts, который выглядит следующим образом:

import { NgModule }   from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }  from '@angular/forms'; 

import { AppComponent }  from './app.component'; 
import { HeaderComponent } from './header.component'; 
import { FooterComponent } from './footer.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ 
     HeaderComponent, 
     AppComponent, 
     FooterComponent 
    ], 
    bootstrap: [ 
     HeaderComponent, 
     AppComponent, 
     FooterComponent 
    ], 
}) 
export class AppModule {} 

Что может привести заголовок не разрушаться при прокрутке, почему это работает, если поместить непосредственно внутрь index.html? и как это можно исправить?

Answer 1

Я ожидаю ваш app.module выглядеть примерно так:

import { NgModule }   from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }  from '@angular/forms'; 

import { AppComponent }  from './app.component'; 
import { HeaderComponent } from './header.component'; 
import { FooterComponent } from './footer.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ 
     AppComponent, 
     HeaderComponent, 
     FooterComponent 
    ], 
    bootstrap: [ 
     AppComponent 
    ], 
}) 
export class AppModule {}