javascript - Angular 2 : defining a Router on another Component than the bootstraped one

Question

我仍在使用 Angular2 开发一个项目。 如果您想了解我为什么需要执行我将要解释的内容的更多详细信息，请参阅此 issue .

我有一个 AppComponent，它是通过 bootstrap 引导的。这是一个非常简单的组件:

@Component({
    selector: 'app-view',
    directives: [ Devtools, MainComponent ],
    template: `
        <ngrx-devtools></ngrx-devtools>
        <main-cmp></main-cmp>
    `
})
export class AppComponent { }

此组件包含另一个组件:MainComponent(通过 main-cmp 选择器)。由于某些原因，我想在 MainComponent 中设置我的路由。

代码如下:

@Component({ 
    selector: 'main-cmp',
    directives: [ ROUTER_DIRECTIVES, NavComponent ],
    template: `
        <h1>App</h1>
        <nav-cmp></nav-cmp>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/home',    name: 'Home',   component: HomeComponent,   useAsDefault: true },
    { path: '/medias',  name: 'Medias', component: MediasComponent }
])
export class MainComponent {
    constructor (private router:Router, private store:Store<AppStore>) {
        router.subscribe(url => store.dispatch(changeUrl(url)));
    }
}

最后，MainComponent 包括 NavComponent，这是一个非常基本的导航。

问题是，使用此设置，我遇到了这个问题: 异常:组件“AppComponent”没有路由配置。在 [['Home'] in NavComponent@2:15] 中。

当然，如果我将路由器的逻辑移至 AppComponent，一切正常。

所以我的问题是:有没有一种方法可以将内容路由到另一个组件而不是引导组件？

谢谢 :).

Answer 1

这似乎是不可能的，因为 RouteRegistry 类的 generate 方法明确依赖(硬编码)根组件。查看源代码中的这一行:

• https://github.com/angular/angular/blob/master/modules/angular2/src/router/route_registry.ts#L345

这是显示错误的代码:

RouteRegistry.prototype._generate = function(linkParams,
         ancestorInstructions, prevInstruction, _aux, _originalLink) {
  (...)
  var parentComponentType = this._rootComponent; // <----
  (...)

  var rules = this._rules.get(parentComponentType);
  if (lang_1.isBlank(rules)) { // <----
    throw new exceptions_1.BaseException("Component \"" +
      lang_1.getTypeNameForDebugging(parentComponentType) +
      "\" has no route config.");
  }

  (...)
};

此方法是从 RouterLink 指令的 _updateLink 方法间接使用的。

这是相应的堆栈跟踪:

RouteRegistry._generate (router.js:2702)
RouteRegistry.generate (router.js:2669)
Router.generate (router.js:3174)
RouterLink._updateLink (router.js:1205)

查看我用来调试问题的插件:https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview .