0

我在 Angular 4 中的子路由有问题。在父路由工作时它不起作用。当我将鼠标悬停在“创建新帐户”上时，它仍然在帐户上。它显示 localhost:4200/account。它必须是 localhost:4200/account/create-account。Parent 路由在 app.component.ts 上，而子路由在 account.component.html 上

//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
    <li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
        <ul class="dropdown-menu">
            <li><a style="cursor: pointer;">Create New Account</a></li>
            <li><a style="cursor: pointer;">View Account</a></li>
        </ul>
    </li>
    <li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>


//app-routing.module.ts
import{ NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/account', pathMatch: 'full' },
    { path: 'account', component: AccountComponent, children: [
        { path: '', component: AccountStartComponent },
        { path: 'create-account', component: CreateAccountComponent },
        { path: 'view-account', component: ViewAccountComponent },
    ]},

    { path: 'news', component: NewsComponent }  
];



@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule {

}

//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

//account.component.html
<div>
<router-outlet></router-outlet>
</div>
4

1 回答 1

1

你需要配置routerLink

 <li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>
于 2017-08-22T04:14:48.063 回答