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

我的第一個問題是，如果我不加1.HeaderComponent，2.FooterComponent在app.module的引導程序，它們中的任何一個（1.HeaderComponent，2.FooterComponent）都會在根路由處於活動狀態時（localhost：3000）加載，但SearchBoxComponent會加載。我有點困惑，因爲我在官方文檔中沒有看到在引導程序中添加多個組件。

我的第二個問題與第一個問題幾乎相同。如果我將組件（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

我也有各種麻煩遷移到RC5，但只有AppComponent應該在你的引導程序中。如果你只通過路由器到達一個組件，那麼該組件不應該在聲明中。但是該組件應該使用導出默認類ComponentName。

我一直在攻擊的方式是評論一切，並一次添加一個組件和服務。

Answer 2

確保聲明組件的模塊出口它。否則，該組件對於嘗試使用它的其他組件將不可見。

我建議爲離散問題創建單獨的模塊，例如搜索，註冊，聊天等，並按照下面的模式分享它們的組件。

我注意到，當正在使用的組件不在範圍內時，Angular2會自動失敗。你會添加一個組件到模板，它不會渲染，沒有錯誤。在RC5之前，它通常意味着您沒有在指令中指定所需的組件：[] array。對於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 {} 

Ba rComponent可以訪問FooComponent並在模板中使用它：

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

Answer 3

謝謝大家幫助我。最後，我解決了這個問題。實際上，我在HeaderComponent和FooterComponenet中包含了ROUTER_DIRECTIVES。這些是發生衝突的地方。這是因爲「RouterModule」隱含地提供了ROUTER_DIRECTIVES。所以，我們不必再在任何組件中包含該指令。我刪除了這條指令，並在一週後修復了我的問題。根據文檔，我也必須改變老式的路由器樣式。

@Alex Sartan：非常感謝您解釋問題的細節。我解決了這個問題，而無需爲離散問題創建單獨的模塊但是，更好地將所有關注點分開。我感謝您的幫助。