Angular 2:在另一个组件上定义一个路由器,而不是引导的
Angular 2 : defining a Router on another Component than the bootstraped one
我仍在使用Angular2进行一个项目。如果你想了解我为什么需要做我将要解释的事情的更多细节,请参阅本期。
我有一个通过bootstrap
引导的AppComponent
。这是一个非常简单的组件:
@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
,这是一个非常基本的导航。
问题是,通过这种设置,我遇到了这个问题:EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15]
。
当然,如果我把路由器的逻辑移到AppComponent
,一切都会很好。
所以我的问题是:有没有一种方法可以将东西路由到另一个组件,而不是引导的组件?
谢谢:)。
这似乎是不可能的,因为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)
请参阅我用来调试您的问题的plunkr:https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview.
使用根作为子路由的解决方法如何?
@Component({
selector: 'app',
directives: [ ROUTER_DIRECTIVES ],
template: `
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path: '/...', as: 'Main', component: MainComponent, useAsDefault: true }
])
export class App { }
@Component({
selector: 'main-cmp',
directives: [ ROUTER_DIRECTIVES ],
template: `
<h1>App</h1>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
])
export class MainComponent { }
相关文章:
- 如何建立一个网页,检查我的路由器网络接口是否可以访问
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- React Router一直给我一个警告:你不能更改<路由器路由>
- 制作一个高阶组件,用TypeScript实现反应中继和反应路由器的交互操作
- 将路由器配置放在Aurelia中的一个单独文件中
- iron路由器将参数添加到字符串中,并添加一个查询
- 如何停止Angular UI路由器将可选参数从一个路由传递到完全不同的路由
- Requirejs+Backbone.js:类型错误:Can't在路由器中传递-路由器不是一个函数
- Angular ui路由器:如何阻止访问一个状态
- Angular 2:在另一个组件上定义一个路由器,而不是引导的
- 使用ui路由器在URL路由中创建一个必需的参数
- 如何使用铁路由器用一个路由控制器渲染多个模板
- 流星铁路由器 - 如何等待(使用加载模板)一个会话.get
- 在一个控制器 ui 路由器中的所有 $state.go() 事件之前运行 check
- EmberJS - 每个页面都有一个没有路由器的控制器链接
- 在骨干路由器的一个操作中绑定多个视图
- 铁路由器流星只发布一个收藏中的一个项目
- 如何从视图将操作从一个控制器/路由器发送到另一个控制器/路由器
- 角度 UI 路由器 - 在没有参数的情况下从一个状态转换到同一状态失败
- 在不同文件中声明路由器时,不会触发一个路由器