Angular 2：在另一个组件上定义一个路由器，而不是引导的组件 [英] Angular 2 : defining a Router on another Component than the bootstraped one

问题描述

我仍在使用Angular2进行项目。
如果您想了解为什么我需要做我将要解释的事情的更多详细信息，请参阅此问题。

I'm still working on a project using Angular2. If you want more details about why I need to do what I'm going to explain, please refer this issue.

我有一个 AppComponent 通过 bootstrap 进行引导。这是一个非常简单的组件：

I have an AppComponent which is bootstraped via bootstrap. It's a very simple component :

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

此组件包括另一个： MainComponent （通过 main-cmp 选择器）。由于某些原因，我想在 MainComponent 中设置路由。

This component includes another one : MainComponent (via the main-cmp selector). For some reasons, I want to set up my routing in 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 ，这是一个非常基本的导航。

Finally, MainComponent includes NavComponent which is a very basic nav.

问题是，使用此设置，我遇到此问题：
例外：组件 AppComponent没有路由配置。在NavComponent @ 2：15的[['Home']中）。

The thing is, with this setup, I encounter this issue : EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15].

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

Of course, if I move my router's logic to AppComponent, everything works well.

所以我的问题是：是否有一种方法可以将东西路由到另一个组件之外

So my question is : is there a way to do routing stuff into another component than the one which is bootstraped ?

谢谢：）。

推荐答案

这是不可能的，因为 RouteRegistry 类的 generate 方法明确依赖于（硬编码）根组件。在源代码中查看以下行：

It appears that it's not possible because the generate method of the RouteRegistry class explictly relies (hardcoded) on the root component. See this line in the source code:

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

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

以下是解决错误的代码：

Here is the code that trhows the error:

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.");
  }

  (...)
};

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

This method is indirectly used from the _updateLink method of the RouterLink directive.

这是相应的堆栈跟踪：

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

请参阅plunkr I用于调试问题： https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview。

See the plunkr I used to debug your problem: https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview.

这篇关于Angular 2：在另一个组件上定义一个路由器，而不是引导的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！