给定路由配置
{
path: '/root/:rootId',
children: [{
path: '/child1/:child1Id',
children: [{
path: '/child2/:child2Id
component: TestComponent
}]
}]
}
Run Code Online (Sandbox Code Playgroud)
在TestComponent中,我如何轻松获得所有路径参数.我想知道是否有比这更简单的方法
let rootId = route.parent.parent.snapshot.params;
let child1Id = route.parent.snapshot.params;
let child2Id = route.snapshot.params;
Run Code Online (Sandbox Code Playgroud)
这似乎过于多余,特别是如果我正在观察路线参数可观察而不是通过路线快照访问参数.这个方法看起来也很脆弱,因为它会破坏如果我移动任何路线/参数周围.我习惯于角度ui-router,其中提供了单个对象$ stateParams,所有param数据都可以轻松访问.我从路由树中的单个节点访问路由解析数据时也遇到了这些问题.任何帮助将非常感激.提前致谢
我需要从不是父母而不是祖母的路线获得参数,它只是在上面的某个地方,沿着通向根的路径.我知道Angular 2中显示的方法:从父组件或通过共享服务获取RouteParams但是我自己进入的情况(至少我认为是这样)使得那些不适合它的那些.所以这就是我得到的:
我有懒惰加载的子模块,需要id从父上下文.情况或多或少看起来像这样的路由配置:
// Parent/outer module routing
const outerRoutes: Routes = [
{
path: 'container/:containerId',
component: ContainerComponent,
children: [
{ path: 'model', loadChildren: 'app/container/model/model.module#ModelModule' },
{ path: '', component: ContainerDetailsComponent }
]
}
];
// Child/inner module routing
const innerRoutes: Routes = [
{
path: '',
component: ModelComponent,
children: [
{ path: ':id', component: ModelDetailsComponent },
{ path: '', component: ModelsComponent }
]
}
];
Run Code Online (Sandbox Code Playgroud)
ModelsComponent需要加载Model属于给定的所有实例Container.所以我决定通过.parent …
我有这个(主要的父母)组件 -
@RouteConfig([
{ path: '/', name: 'ProjectList', component: ProjectListComponent, useAsDefault: true },
{ path: '/new', name: 'ProjectNew', component: ProjectFormComponent },
{ path: '/:id', name: 'ProjectDetail', component: ProjectDetailComponent },
{ path: '/:id/issues/...', name: 'Issue', component: IssueMountComponent },
])
class ProjectMountComponent {
}
Run Code Online (Sandbox Code Playgroud)
然后我有第二个mount组件(主父的子代,下一个组件的父代)
@Component({
template: `
<div><router-outlet></router-outlet></div>
`,
directives: [RouterLink, RouterOutlet]
})
@RouteConfig([
{ path: "/", name: "IssueList", component: IssueListComponent, useAsDefault: true },
])
class IssueMountComponent {
constructor(private _routeParams: RouteParams) {
}
}
Run Code Online (Sandbox Code Playgroud)
在这里,我可以毫无问题地访问routeParams(:id).现在,这是我需要:id来自uri 的值的组件.
@Component({
template: ` …Run Code Online (Sandbox Code Playgroud) 我的路由定义为/ abc /:id/xyz
其中abc /:id解析为ComponentA,而/ xyz是路由器插座中显示的子组件(ComponentB)
当导航到/ abc /:id/xyz时,当我在ComponentA中执行this.route.params.subscribe(...)(其中route是ActivatedRoute)时,我看到:id.在ComponentB中做同样的事情我没有看到:id.我猜ActivatedRoute正在使用url段.
无论如何要获得路线中的所有参数?
所以我在AuthenticationService中有以下代码.检查登录凭据后,用户将被重定向到其配置文件:
authentication.service.ts:
redirectUser(username:string):void {
// Redirect user to profile on successful login
this.router.navigate(['../Profile/Feed', {username: username}]);
}
Run Code Online (Sandbox Code Playgroud)
这一切都很好,但自从我在里面引入了一些子路由后ProfileComponent,我遇到了一些错误.首先,这是我的AppComponent与RouteConfig:
app.ts:
import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {HomeComponent} from '../home/home';
import {AuthenticationService} from '../../services/authentication.service';
import {LoginComponent} from '../login/login';
import {ProfileComponent} from '../profile/profile';
import {ProfileService} from '../../services/profile.service';
@Component({
selector: 'app',
viewProviders: [AuthenticationService, ProfileService, HTTP_PROVIDERS],
encapsulation: ViewEncapsulation.None,
directives: [
ROUTER_DIRECTIVES
],
templateUrl: './components/app/app.html'
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/inloggen', …Run Code Online (Sandbox Code Playgroud) 我想知道是否有可能有 2 条不同的路线指向 1 个单个组件?例如:
{ path: 'signin', component: SignInComponent },
{ path: 'tenant/:id/signin', component: SignInComponent }
Run Code Online (Sandbox Code Playgroud)
我问是因为我有一些有线行为..