问题描述
我有一个仪表板应用程序,该应用程序由一个treeview组件(列出了各种内容节点)和一个dashboard-edit组件组成,该组件根据选择的树的分支呈现一些可编辑的内容.
I have a dashboard application which consists of a treeview component (which lists various content nodes) and a dashboard-edit component which renders some editable content depending on which branch of the tree is selected.
例如树是这样的:
- Football
- - Premier League
- - - Arsenal
- - - Chelsea
- - - ...etc
- - Championship
- - - Derby
- - - ...etc
您在树中单击阿森纳",它会在页面上的可编辑面板中为该团队呈现一些内容.
You click 'Arsenal' in the tree and it renders some content for that team in an editable panel on the page.
呈现子组件的组件如下:
The component which renders the sub-components is like this:
@Component({
selector: 'my-dashboard',
template: `
<div class="tree-panel-container">
<div class="tree-panel-content">
<content-tree [startNodeId]="startNodeIdContent"></content-tree>
</div>
</div>
<router-outlet></router-outlet>
`,
directives: [
ContentTreeComponent,
ContentDashboardComponent,
RouterOutlet
],
providers: [
HTTP_PROVIDERS
]
})
可编辑的内容在router-outlet
中呈现,因此每个可编辑的内容都有其自己的不同URL,例如example.com/content/edit/123
,其中123
是阿森纳内容的ID.
The editable content is rendered in a router-outlet
so that each editable piece of content has its own distinct URL e.g. example.com/content/edit/123
where 123
is the id of the Arsenal content, for example.
一切正常.
但是,我想做的是能够访问content-tree
组件中的id
路由参数.目前,我非常确定该组件中的代码应该可以正常工作:
However, what I want to do is be able to access the id
route parameter in the content-tree
component. Currently, I'm pretty sure the code I have in that component should work:
import {Component, Input, OnInit} from '@angular/core';
import {Router, RouteParams} from '@angular/router-deprecated';
import {ContentNode} from './content-node';
import {ContentService} from '../services/content.service';
@Component({
selector: 'content-tree',
directives: [ContentTreeComponent],
template: `
<ol class="tree">
<li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">
<a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="tree__branch__toggle">
{{ !!contentNode.toggle ? '-' : '+' }}
</a>
<a class="tree__branch__link" (click)="onSelect(contentNode)">{{ contentNode.Name }}</a>
<content-tree *ngIf="contentNode.toggle" [startNodeId]="contentNode.Id"></content-tree>
</li>
</ol>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
`
})
export class ContentTreeComponent implements OnInit {
constructor(
private _contentService: ContentService,
private _router: Router,
private _routeParams: RouteParams
) { }
errorMessage: string;
@Input('startNodeId')
private _startNodeId: number;
contentNodes: ContentNode[];
ngOnInit() {
let nodeId = +this._routeParams.get('id');
console.log('nodeId = ' + nodeId);
this.getContentNodes();
}
onSelect(contentNode: ContentNode) {
this._router.navigate( ['ContentEdit', { id: contentNode.Id }] );
}
getContentNodes() {
this._contentService.getContentNodes(this._startNodeId)
.subscribe(
contentNodes => this.contentNodes = contentNodes,
error => this.errorMessage = <any>error
);
}
}
但是ngOnInit
方法中的nodeId
变量始终以0
的形式返回.
But the nodeId
variable in the ngOnInit
method is always returned as 0
.
问题:是否只能访问路由器出口提供的组件中的路由参数?如果是这样,那么解决此问题的最佳方法是创建第二个(命名为,因为现在将有2个)路由器出口吗?如果没有,那我在做什么错了?
Questions:Is it only possible to access route params in a component rendered by a router-outlet? If so, then is the best method to deal with this to create a second (named, because there will now be 2) router-outlet? If not, then what am I doing wrong?
非常感谢.
一个工作正常的(而且很丑陋的)Plnkr现已生成,以显示该应用程序的基础知识: http://plnkr.co/edit/W3PVk3Ss5Wq59IbnLjaK?p=preview .查看评论,了解应该发生的事情...
A working (and very ugly ;)) Plnkr has now been generated to show the basics of the app: http://plnkr.co/edit/W3PVk3Ss5Wq59IbnLjaK?p=preview. See comments for what is supposed to happen...
推荐答案
在新路由器(> = RC.0< = RC.2 )中,
import 'rxjs/add/operator/first';
...
constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
router.changes.first().subscribe(() => {
let urlTree = this.routeSerializer.parse(location.path());
console.log('id', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);
});
}
另请参见 Angular 2 RC1 :从使用的初始URL获取参数
这篇关于Angular2在路由器出口之外获取路由器参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!