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のブートストラップ。ルートルートがアクティブな場合（localhost：3000）、SearchBoxComponentはロードされません（1.HeaderComponent、2.FooterComponent）。ブートストラップで複数のコンポーネントを追加することは公式の文書では分かりませんでしたので、混乱しています。

私の2番目の問題は、最初の問題とほぼ同じです。次のコードのように、コンポーネント（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を使用する必要があります。

私がこれを攻撃してきたやり方は、すべてをコメントし、コンポーネントとサービスを1つずつ追加することです。

Answer 2

コンポーネントを宣言するモジュールがにエクスポートされていることを確認してください。さもなければ、このコンポーネントはそれを使用しようとしている他のコンポーネントには見えません。

私は、検索、サインアップ、チャットなどの個別の問題のための個別のモジュールを作成し、以下のパターンに従ってコンポーネントを共有することをお勧めします。

使用しているコンポーネントが有効範囲にないときに、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 {} 

バrComponentはFooComponentにアクセスし、テンプレートでそれを使用することができます。

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

Answer 3

はあなたに私を助けるためのみんなに感謝します。最後に、私はこの問題を解決しました。私は実際にHeaderComponentとFooterComponenetにROUTER_DIRECTIVESを含めていました。これらは競合が発生する場所です。これは、 "RouterModule"が暗黙的にROUTER_DIRECTIVESを提供するためです。そのため、このディレクティブをどのコンポーネントにも組み込む必要はありません。私はこの指令を削除し、ほぼ一週間後に問題を解決しました。私はまた、ドキュメントによると、旧式のrouterLikeスタイルを変更しなければならなかった。

@Alex Sartan：問題の詳細を説明してくれてありがとう。私は個別の懸念のために別々のモジュールを作成せずに問題を解決します。しかし、これはすべての懸念を分けておく方が良いです。私はあなたの助けに感謝します。