URL変更時にコンポーネントが読み込まれない

Question

兄弟コンポーネントに移動しようとしていますが、URLは変更されますが、コンポーネントは変更されず、現在のコンポーネントに残ります。私は、SPAデザインを打ち負かすコンポーネントをロードするために、アプリケーションをリフレッシュする必要があります。 Navbarコンポーネントから同じリンクをテストしました。これは、コンポーネントからナビゲートしようとするとうまく動作しないPlatformResultコンポーネントの兄弟です。私はここで愚かな何かをしていると確信しています、ここで何が起こっているのか理解してください。

イベントサービスを使用してステータスコンポーネントからアプリケーションコンポーネントに通知すると、appコンポーネントがurlにナビゲートし、コンポーネントが期待どおりに読み込まれます。それは

app.component.ts

@Component({ 
selector: 'app', 
template: ` 
<div class="wrapper"> 
    <navbar></navbar> 
    <div class="content-wrapper container-fluid"> 
     <div class="row"> 
     <div class="col-md-12"> 
     <div class="alert alert-danger" role="alert" [ngStyle]="{'display': style}">{{error}}</div> 
     <router-outlet></router-outlet> 
     </div> 
     </div> 

    </div> 
    <app-footer></app-footer> 
</div> 
`, 
directives: [Navbar, Sidebar, Footer, ROUTER_DIRECTIVES], 
providers: [ROUTER_PROVIDERS, DataService, NavigationService], 
styleUrls: ['styles/app.css'] 

    @RouteConfig([{ 
     path: '/status', 
     name: 'Home', 
     component: StatusTable, 
     useAsDefault: true 
    }, { 
      path: '/platform', 
      name: 'Platform', 
      component: PlatformResult 
     }, { 
      path: '/**', 
      name: 'Other', 
      redirectTo: ['Home'] 
     }]) 

export class AppComponent { 
    error: string; 
    showError: boolean; 
    style: Object; 

    constructor(private navigationService: NavigationService, private router: Router) { 
     // listen to navigation events 
     // AS A WORKAROUND, THIS IS THE WAY I CAN NAVIGATE TO /platform from /status 
     navigationService.navigationAnnounced$.subscribe(
      message => { 
       router.navigate([message.componentName, message.params]); 
      } 
     ); 
    } 
} 

status.template.html（部分）

... 
<thead class="heading" [ngClass]="{'fade-table': spinner}"> 
     <tr> 
      <th>Diffs ({{diffCount}})</th> 
      <th *ngFor="#platform of platforms"> 
       <div class="vertical" style="width:30px"> 
        <a [routerLink]="['/Platform', {name: platform.name}]"> 
         <small>{{platform?.name}}<span class="text-danger" *ngIf="platform.ssl">({{platform?.ssl}})</span></small> 
        </a> 
       </div> 
      </th> 
      <th><small>Assigned To</small></th> 
      <th><small class="pull-left">Comments</small></th> 
     </tr> 
     <tr> 
     </tr> 
    </thead> 
    .... 

簡単な問題のためにやり過ぎのように思えるようしかし、私はこれを好みません

Answer 1

削除ROUTER_PROVIDERS

providers: [ROUTER_PROVIDERS, DataService, NavigationService], 

bootstrap(AppComponent, [ROUTER_PROVIDERS])

グローバルインスタンスを追加する場合にのみ追加してください。コンポーネントにもそれらを追加すると、コンポーネントはルーティングを中断する別の（新しい）インスタンスを取得します。