Angular2：如何 link 直接从根视图到（大）子视图

Question

我正在试验 Angular 2，遇到了一个问题，我不确定如何调试。

示例情况

我有一个 AppComponent 来处理所有基本级别的路由，并且每个 'level' 向下的路由都在该级别的新路由器上声明。

我有以下路线：

/home ，定义于 AppComponent
/applications ，在 AppComponent
/applications/new ，定义于 ApplicationRouterComponent
/applications/foo ，定义于 ApplicationRouterComponent

作为周围模板的一部分，有一个所有页面通用的导航栏，因此需要能够 link 到子路由器中定义的任何路由。 [routerLink]调用嵌套组件不会引发任何错误。

问题

当 link转到孙子路由时，似乎甚至没有构建 View 组件。即，

<a [routerLink]="['./ApplicationRouter/New']">New Application</a>

ApplicationRouterComponent 被构造和显示，但 NewApplication 组件没有。

代码示例

appComponent.ts

import {Component} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS
} from 'angular2/router';
import {ApplicationRouterComponent} from './routes/application/applicationRouter';
import {HomeComponent} from './routes/home/homeComponent';

@Component({
  selector: 'bop-application',
  templateUrl: 'app/index.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/applications/...', name: 'ApplicationRouter', component: ApplicationRouterComponent }
])
export class AppComponent { }

./app/routes/application/applicationRouter

import {Component} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS
} from 'angular2/router';
import {NewApplicationComponent} from './new/newApplicationComponent';
import {FooComponent} from './new/foo';

@Component({
  selector: 'application-router',
  templateUrl: 'app/routes/application/index.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
})
@RouteConfig([
  { path: '/new', name: 'New', component: NewApplicationComponent},
  { path: '/foo', name: 'Foo', component: FooComponent},
])
export class ApplicationRouter {
  constructor() {
    debugger;
  }
}

./app/index.html

<h1>Portal</h1>
<nav>
    <a [routerLink]="['Home']">Home</a>
    <a [routerLink]="['./ApplicationRouter/New']">New Application</a>
</nav>
<router-outlet></router-outlet>

./app/application/index.html

Application Router
<router-outlet></router-outlet>

./app/application/new/new.html

<h4>New View</h4>

Answer 1

路由器link应该是

<a [routerLink]="['/ApplicationRouter', 'New']">New Application</a>

路由器link采用路由名称列表，而不是路径。有一些支持的字符被解释为路径

/xxx 从根路由器开始
.. 用于从父路由器开始
./xxx 当前路由器（AFAIK 冗余）

Angular2：如何 link 直接从根视图到（大）子视图

Angular2: How to link directly from the root view to a (grand)child view

angularjs

angular

angular2-routing