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：非常感谢您解释问题的细节。我解决了这个问题，而无需为离散问题创建单独的模块但是，更好地将所有关注点分开。我感谢您的帮助。