URL 更改时组件未加载

Question

我正在尝试导航到同级组件，url 发生了变化，但该组件并未发生变化，它仍保留在当前组件中。我必须刷新应用程序才能加载破坏 SPA 设计的组件。我从 Navbar 组件测试了相同的 link，它也是 PlatformResult 组件的同级组件，它工作正常但在尝试从 StatusTable 组件导航时不起作用。我确定我在这里做了一些愚蠢的事情，请帮我弄清楚这里发生了什么。

作为此问题的解决方法，我使用事件服务从状态组件通知应用程序组件，应用程序组件导航到 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])

拥有全局实例。如果您将它们也添加到组件上，组件将获得一个不同的（新的）实例，这会中断路由。

URL 更改时组件未加载

Component does not load upon URL change

angular

angular2-routing