首页 文章

Angular 2 RC1子路由

提问于
浏览
1

目前,我能够使用Angular 2 RC1处理基本的路由情况,例如主链路有很少的链接,点击它们在主路由器插座中渲染内容 .

同样,单击子组件中的链接会在子组件路由器出口中呈现其子组件 .

我无法实现的是我需要在应用程序的主要插座中呈现子组件的情况 .

我的网址结构如下:

/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/

单击上面的链接将呈现App Component的路由器插座中除Profile链接之外的内容 . 当我单击配置文件链接时,该链接确实有效,但它在用户帐户页面下呈现配置文件组件(作为子部分),我想要的是单击配置文件链接应该在主路由器插座中呈现内容,即App的路由器插座零件 .

另一个问题,目前我必须添加一个帐户组件,否则路由器不允许带有“帐号”字的网址 . 是否有任何方法可以将一些前缀附加到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() {}

}

1 回答

  • 0

    我想要的是点击配置文件链接应该在主路由器插座中呈现内容,即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 开头的所有路由 .

    Plunker example

相关问题