Angular 2 RC1儿童路由
目前我能够处理使用Angular 2 RC1进行路由的基本情况,比如主链路少的主要组件,在主路由器插座上点击它们呈现内容。Angular 2 RC1儿童路由
同样,单击子组件中的链接在子组件路由器插座中呈现其子组件。
我无法完成的是我需要在应用程序的主要插座中渲染子组件的情况。
我的URL结构如下:
/account/user/
/account/user/profile/
/account/user/otherfeature/
/account/admin/
/account/admin/somefeature
/account/admin/anotherfeature
我有下面的代码,其运行时显示的主页,以链接到
User Account: points to, /account/user/
Admin: points to /account/admin/
User Profile: points to /account/user/profile/
点击上述链接在路由器呈现内容应用程序组件的出口除了配置文件链接。当我点击配置文件链接时,链接确实工作,但它呈现用户帐户页面下的配置文件组件(作为子部分),我想要的是单击配置文件链接应呈现主要路由器插座中的内容,即应用程序的路由器插座零件。
另一个问题,目前我必须添加一个帐户组件,否则路由器不允许带有“帐户”字的网址。有没有任何方法可以将一些前缀附加到URL而不将其映射到组件。根据我的理解,当前的路由器捣毁url段中的url并尝试将url的帐户部分映射到组件,因此我必须为此组件。请建议任何更好的方法来实现这一点。
应用组件:
import {Component, OnInit} from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
import {AccountComponent} from './account.component';
@Component({
selector: 'app',
template: `
<a href="/index.html">Home</a> |
<a [routerLink]="['./account/user/']">User Account</a> |
<a [routerLink]="['./account/user/profile/']">Profile</a> |
<a [routerLink]="['./account/admin/']">Admin Account</a> |
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@Routes([
{ path: '/account', component: AccountComponent },
])
export class AppComponent {
constructor(private router: Router) {
}
}
帐户组件:
import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { UserAccountComponent } from './user/user-account.component';
import { AdminAccountComponent } from './admin/admin-account.component';
@Component({
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/user', component: UserAccountComponent },
{ path: '/admin', component: AdminAccountComponent }
])
export class AccountComponent {
constructor() { }
}
用户帐户组件:
import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { ProfileComponent } from './profile.component';
@Component({
template: `
<h1>User Account</h1>
<a [routerLink]="['./profile']">Profile</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/profile', component: ProfileComponent },
])
export class UserAccountComponent {
constructor() { }
}
资料元器件
import { Component } from '@angular/core';
@Component({
template: `
<h1>Profile</h1>
`,
})
export class ProfileComponent {
constructor() {}
}
what I want is that clicking Profile link should render contents in the main router outlet i.e. router outlet of App Component.
然后AppComponent
需要包含与您在routerLink
@Component({
selector: 'my-app',
styles: [':host { display: block; border: solid 3px red;}'],
template: `
<!--<a href="/index.html">Home</a> |-->
<a [routerLink]="['./account/user/']">User Account</a> |
<a [routerLink]="['/account/user/profile/']">Profile</a> |
<a [routerLink]="['./account/admin/']">Admin Account</a> |
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@Routes([
{ path: '/account/user', component: UserAccountComponent },
{ path: '/account', component: AccountComponent },
])
export class App {
constructor(private router: Router) {}
}
目前路径的排列顺序是显著使用路径的路线。更重要的路线需要先来。在这种情况下,相反的顺序永远不会找到/account/user
,因为/account
将匹配以/account
开头的所有路由。
我不确定第二个问题。也许我的回答已经提供了一些反馈,否则我想我需要一个更具体的例子什么不按预期工作。 –
非常感谢Günter的回复,看来这个问题需要更多的澄清。你提供的plunker正如我现在所做的那样,我想要的是,当用户点击Profile链接时,它应该呈现在用户组件呈现的同一出口(或DIV)中,同时具有这个URL模式:/ account /用户/配置文件/ –
得到它的工作,所需的只是将配置文件路由放在应用程序组件中。我在发布这个问题之前尝试了它,但是我收到错误消息说无法找到任何“帐户”路线。也许你是对的,路线顺序很重要,更具体的路线需要在普通路线之前先行。 –
的角度RC1路由仍没有记录,甚至官方的例子使用过时的@角/路由提倡的,这有大量的儿童路由的例子。 – fredrik