angular - URL 更改时组件不会加载

Question

我正在尝试导航到同级组件，URL 更改但组件没有更改，它保留在当前组件中。我必须刷新应用程序才能加载破坏 SPA 设计的组件。 我测试了来自 Navbar 组件的相同链接，该组件也是 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])

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