Angular 2 嵌套路由：视图或 url 未更新

Question

主路由器：

@RouteConfig([
    { path: '/', name: 'Intro', component: IntroComponent, useAsDefault: true },
    { path: '/locator/...', name: 'Locator', component: LocatorComponent },
])

子路由器：

@RouteConfig([
    { path: '/bydistrict', name: 'ByDistrict', component: ByDistrictComponent },
    { path: '/bycounty', name: 'ByCounty', component: ByCountyComponent },
    { path: '/byregion', name: 'ByRegion', component: ByRegionComponent, useAsDefault: true }

主导航：

    <a class="nav-item nav-link" href="#" [routerLink]="['Locator', 'ByDistrict']">Search</a>
    <a class="nav-item nav-link" href="#" [routerLink]="['Locator', 'ByCounty']">Counties</a>
    <a class="nav-item nav-link" href="#" [routerLink]="['Locator', 'ByRegion']">Regions</a>

问题 #1： 单击主导航链接时，视图始终正确更新，但 URL 从未更新以反映第一个导航项 "Search" 当它被选中时。它始终保持设置为先前的活动路径。其他两个正确更新。

问题 #2： 当从子组件（例如 ByDistrictComponent）导航到新路线时，URL 会更新以反映新路线，但是视图没有得到更新。无论是使用 [routerLink]="['/Locator', 'ByCounty'] 还是通过 this._router.navigate(...).

的代码，都会出现此问题

对于这两种情况，控制台均未报告任何错误。

我今天刚更新到 Angular 2 (2.0.0-beta.11) 的当前版本及其依赖项。我使用的上一个版本 (beta.9) 也存在该问题。

我将这两个问题作为一个问题发布，因为我认为它们可能都与使用子路由器时的意外行为有关。

更新 #1

只有当 Router 被注入组件的构造函数时，这两个问题才会开始发生，该组件是通过 ByDistrictComponent（在子路由中引用）的指令加载的。

import { Component, OnInit }            from 'angular2/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from 'angular2/router';

@Component({
    ...
})
export class DistrictListComponent implements OnInit {
    constructor(
        private _router: Router) { // <-- causes both issues
    }
    ...
}

Answer 1

Working Plunker

注意：

1) 我已更改 index.html 页面。
2) 改变了 main.ts

main.ts

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {App} from './app';

bootstrap(App, [
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
      //provide(LocationStrategy,{useClass: HashLocationStrategy} you can also use this if you don't want to you bind().
    ])
  .catch(err => console.error(err));

Angular 2 嵌套路由：视图或 url 未更新

Angular 2 nested routing: view or url not being updated

router

angular

更新 #1