Bileşen, URL değiştiğinde yüklenmiyor

Question

Bir kardeş bileşenine gitmeye çalışıyorum, url değişiyor ancak bileşen değişmiyor, geçerli bileşende kalıyor. SPA tasarımını yenen bileşeni yüklemek için uygulamayı yenilemeliyim. Aynı bağlantıbileşenininbileşeninin bir kardeşi olan Navbar bileşeninden de test ettim, ancak StatusTable bileşeninde gezinmeye çalıştığında çalışmaz. Eminim burada aptalca bir şey yapıyorum, lütfen bana burada neler olduğunu anlamaya yardım edin.

Bu soruna geçici bir çözüm olarak, uygulama bileşenini durum bileşeninden bilgilendirmek için olay hizmetini kullanıyorum; uygulama bileşeni, URL'ye ve bileşen beklendiği gibi yüklenir. basit bir sorun için bir overkill gibi görünüyor Ama bunu tercih etmez

(kısmi)

... 
<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> 
    .... 

@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 app.component.ts

Answer 1

ROUTER_PROVIDERS kaldırmak

providers: [ROUTER_PROVIDERS, DataService, NavigationService], 

, global örneklere sahip olması için bunları yalnızca bootstrap(AppComponent, [ROUTER_PROVIDERS])

'a ekleyin. Bunları bileşen üzerinde de eklerseniz, bileşen yönlendirmeyi kesen farklı (yeni) bir örnek alır.