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

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

示例情况

我有一个处理所有基本层路由的

AppComponent

，每个向下路由的“级别”都在该级别的新路由器上声明

我有以下路线：

• /主页，在AppComponent上定义
• /应用程序，在AppComponent上定义
• /应用程序/新，在

  ApplicationRouterComponent

• /应用程序/foo，在

  ApplicationRouterComponent

作为周围模板的一部分，有一个导航栏，所有页面都通用，因此需要能够链接到子路由器中定义的任何路由<代码>[routerLink]绑定到嵌套组件不会导致抛出任何错误

问题

链接到孙辈管线时，视图组件似乎并未构造。i、 e

新应用程序

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/application路由器

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>

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

门户
家
新应用

./app/application/index.html

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

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

应用路由器

./app/application/new/new.html

<h4>New View</h4>

新视图

路由器链接应为

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

新应用程序

路由器链接采用路由名称列表，而不是路径。支持的某些字符被解释为路径中的字符

• /xxx

  用于从根路由器启动

• 。

  用于从父路由器启动
• 当前路由器的

  /xxx

  （AFAIK冗余）

---

谢谢你。我更新了上面的内容，但它仍然没有构造或渲染组件。事实上，出于某种奇怪的原因，它在应用程序路由器组件中生成了home组件。它正确地生成了URL，我注意到如果单击一次，它将加载ApplicationRouter组件，然后再次单击实际上会更改URL。但是仍然不会呈现孙子组件。不要在组件上添加

ROUTER\u提供程序

——仅在

bootstrap（…）