我尝试创建一个具有两个不同模块的应用,其中一个用于我的前台,一个用于我的后台。路线与前台完美工作,我为我的主模块做到了。
当我使用第二个模块导航时,当我在浏览器导航栏中倾斜链接时,它将我重定向到完美的组件。但是,当我使用模板内的Routelink在后台内导航时,它行不通。
这是我对第二模块的配置(back.module.ts(:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BackComponent } from './back.component';
import { Page1Component } from '../page1.component';
import { Page2Component } from '../page2.component';
@NgModule({
declarations: [
BackComponent,
Page1Component,
Page2Component
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'back',
component: MainAdministrationComponent,
children: [
{
path: 'page1',
component: Page1Component
},
{
path: 'page2',
component: Page2Component
},
{
path:'',
redirectTo: '/back/page1',
pathMatch: 'full'
}
]
}
])
],
providers: [],
bootstrap: [BackComponent]
})
export class BackModule { }
这是我的模板back.component.hmtl
<ul class="nav navbar-nav">
<li>
<a route-link="/back/page1" routeLinkActive="active"><i class="material-icons">home</i> Page 1</a>
</li>
<li>
<a route-link="/back/page2" routeLinkActive="active"><i class="material-icons">event</i> Page 2</a>
</li>
</ul>
在我的后台模块中,我使用角材料,我不知道它是否与某些东西发生冲突
在Angular中,您只能拥有一个routermot.forroot([](通常它调用app.module和其他模块使用routermodule.forchild((。
我将签名用于链接
<a [routerLink]="['/examplePath']" routerLinkActive="active">
和
<router-outlet></router-outlet>
用于插入组件模板。
我希望它能帮助您