javascript - Angular2 rc5> 组件未加载

Question

我最近从 RC4 迁移到 Angular2 RC5。从那以后我遇到了几个问题。我不确定这些问题是我的错误还是过渡性的。我的应用程序组件如下所示:

import {Component, OnInit} from "@angular/core";
import {SetLocationService} from "./auth/set-location.service";

@Component({
  selector : "my-app",
  template: `
  <app-header></app-header>
    <router-outlet></router-outlet>
  <app-footer></app-footer>
  `
})

export class AppComponent implements OnInit{
  constructor(
    private _setLocationService : SetLocationService
  ){}

  ngOnInit() {
    this._setLocationService.setLocation();
  }
}

路由:

import {Routes, RouterModule} from '@angular/router';
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {LoginComponent} from "./auth/login.component";
import {SignupComponent} from "./auth/signup.component";
import {LogoutComponent} from "./auth/logout.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {ProfileComponent} from "./auth/profile.component"
import {AccountComponent} from "./auth/account.component"

const appRoutes: Routes = [
  {path : '',  component: SearchBoxComponent},
  {path : 'login',  component: LoginComponent},
  {path : 'signup', component: SignupComponent},
  {path : 'logout', component: LogoutComponent},
  {path : 'profile', component: ProfileComponent},
  {path : 'account', component: AccountComponent},
  {path : 'user/:uname', component: SearchBoxComponent},
  {path : 'recover-password', component: RecoverPasswordComponent},
  {path : 'search/:params', component: SearchResultComponent},
  {path : '**', component : SearchBoxComponent}
];

export const routing = RouterModule.forRoot(appRoutes);

应用模块:

// @Modules -> Modules
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {NgModule} from '@angular/core';
// import {RouterModule} from '@angular/router';

// @Routes -> routes
import {routing} from "./app.routes";

// @Components - > Components
import {AccountComponent} from "./auth/account.component";
import {AppComponent} from './app.component';
import {ChatBoxComponent} from "./chat/chat-box.component";
import {ChatBoxDirective} from "./chat/chat-box.directive";
import {FooterComponent} from "./layout/footer.component";
import {HeaderComponent} from "./layout/header.component";
import {LoginComponent} from "./auth/login.component";
import {LogoutComponent} from "./auth/logout.component";
import {ProfileComponent} from "./auth/profile.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {SignupComponent} from "./auth/signup.component";


// @providers - > services
import {AuthService} from "./auth/auth.service";
import {SetLocationService} from "./auth/set-location.service";
import {SearchService} from "./search/search.service";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  declarations: [
    AccountComponent,
    AppComponent,
    ChatBoxComponent,
    ChatBoxDirective,
    FooterComponent,
    HeaderComponent,
    LoginComponent,
    LogoutComponent,
    ProfileComponent,
    RecoverPasswordComponent,
    SearchBoxComponent,
    SearchResultComponent,
    SignupComponent
  ],
  providers : [
    AuthService,
    SetLocationService,
    SearchService,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ]
})

export class AppModule {}

我的第一个问题是，如果我不在 app.module 的 Bootstrap 中添加 1.HeaderComponent、2.FooterComponent，当根路由处于事件状态时，它们(1.HeaderComponent、2.FooterComponent)都不会加载(localhost:3000) ，而是 SearchBoxComponent。我有点困惑，因为我在官方文档中没有看到在 bootstrap this 中添加多个组件。

我的第二个问题和第一个几乎一样。如果我将一个组件 (seachBoxConmponent) 嵌入到另一个组件中，如下面的代码，则不会加载 seachBoxConmponent 组件，而是加载其他部分。

@Component({
    selector: "search-result",
    template : `
            <seachBox></searchBox>
    <div class="tag_list">
      <p *ngFor = "let tag of result.obj.tags" class = "tag-li" >
        <a [routerLink] = "['/search', tag]" (click) = "onSearchCliked($event, tag)"> {{tag}} </a>
      </p>
    </div>
`
})

我想知道，任何人都可以帮助我，过去几天我一直在研究这个问题，但我仍然被困在这里。

Answer 1

确保声明组件的模块导出它。否则，该组件将对其他试图使用它的组件不可见。

我建议为搜索、注册、聊天等离散问题创建单独的模块，并按照以下模式共享它们的组件。

我注意到，当正在使用的组件不在范围内时，Angular2 会自动失败。您将向模板添加一个组件，它不会呈现，没有错误。在 RC5 之前，这通常意味着您没有在 directives:[] 数组中指定所需的组件。对于 RC5，这可能意味着您不会从声明它的模块中导出组件和/或在想要使用它的模块中导入它。

FooModule 声明并导出 FooComponent，将其公开以供其他组件使用(可能在其他模块中):

@NgModule({
    declarations: [FooComponent],
    imports: [BrowserModule, FormsModule],
    exports: [FooComponent]

})
export class FooModule {}

Foo组件:

@Component({
    selector: 'foo',
    template: `FOO`
})
export class FooComponent {}

BarModule 导入 FooModule，获得对其公开的组件(即 FooComponent)的访问权:

@NgModule({
    declarations: [BarComponent],
    imports: [FooModule, FormsModule],
    exports: [BarComponent]

})
export class BarModule {}

BarComponent 可以访问 FooComponent 并在模板中使用它:

@Component({
    selector: 'bar',
    template: `<foo></foo>BAR`
})
export class BarComponent {}