Angular2 rc5>組件未加載

Question

我最近從RC4搬到了Angular2 RC5。 從那時起，我遇到了幾個問題。 由於過錯或過渡，我不確定這些問題是不是我的問題。 我的app組件如下所示：

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);

app模塊：

// @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中添加多個組件。

我的第二個問題幾乎與第一個問題相同。 如果我在另一個組件中嵌入一個組件（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之前，它通常意味着您沒有在指令中指定所需的組件：[]數組。 使用RC5，這可能意味着您不是從聲明它的模塊中導出組件和/或在想要使用它的模塊中導入它。

FooModule聲明並導出FooComponent，公開它以供其他組件使用（可能在其他模塊中）：

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

})
export class FooModule {}

FooComponent：

@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 {}

Answer 2

我在遷移到RC5時遇到了各種麻煩，但只有AppComponent應該在你的bootstrap中。 如果您只通過路由器訪問組件，那么該組件不應該在聲明中。 但該組件應使用導出默認類ComponentName。

我一直在攻擊它的方式是評論所有內容並一次添加一個組件和服務。

Answer 3

謝謝你們幫助我。 最后，我解決了這個問題。 我實際上在HeaderComponent和FooterComponenet中包含了ROUTER_DIRECTIVES。 這些是發生沖突的地方。 這是因為“RouterModule”隱式提供了ROUTER_DIRECTIVES。 因此，我們不必在任何組件中再次包含該指令。 我刪除了這個指令，並在幾乎一周之后修復了我的問題。 我也不得不根據文檔改變老式的routerLike風格。

@Alex Sartan：非常感謝您解釋問題的細節。 我解決了這個問題而沒有為離散問題創建單獨的模塊。 但是，最好將所有問題分開。 我感謝您的幫助。