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：点击主导航链接时，视图始终会正确更新，但网址永远不会更新，以反映选中时的第一个导航项“搜索”。它始终保持设置为先前的活动路径。其他两个正确更新。

问题＃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嵌套路由：视图或网址未更新

更新＃1

1 个答案: