組件不會加載URL更改

我想導航到兄弟組件，url更改但組件不會更改，它仍保留在當前組件中。我必須刷新應用程序才能加載失敗SPA設計的組件。我測試了Navbar組件的相同鏈接，它也是PlatformResult組件的同級組件，它可以正常工作，但在嘗試從StatusTable組件導航時不起作用。我確信我在這裏做了些傻事，請幫我弄清楚這裏發生了什麼。組件不會加載URL更改

作爲解決此問題的一種解決方法，我使用事件服務從狀態組件中通知應用程序組件，應用程序組件導航到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> 
    ....

來源

2016-03-30 Sudhakar

刪除ROUTER_PROVIDERS from

providers: [ROUTER_PROVIDERS, DataService, NavigationService],

將它們僅添加到bootstrap(AppComponent, [ROUTER_PROVIDERS])

具有全局實例。如果你將它們添加到組件上，組件也會獲得一個不同的（新的）實例，從而導致路由中斷。

來源

2016-03-30 18:07:54

啊！黨！我知道我做的很愚蠢。現在工作。謝謝你，先生！ – Sudhakar

很高興聽到這個修正:) –

雖然它解決了我的主要問題，它似乎在StatusTable組件中路由有不好的影響，我在組件中設置的任何路由都會觸發整頁加載並返回主頁 Ex ：這個函數在StatusTable中，當被調用時，它設置URL查詢參數 - 這現在失敗了。任何線索？ ex：goto（區域，分支，日期，評論）{ this.router.navigate（['Home'，this.setRouteParams（area，branch，date，comments）]）; this.getRegressionStatus（area，branch，date，comments）; } – Sudhakar

組件不會加載URL更改

回答

相關問題