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

我的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 {}

Angular2组件js无法正常工作

1 个答案: