问题描述
我想使用命名的路由器插座,但我遇到了问题, 这是我的代码..
app-routing.module.ts
const routes: Routes = [
{ path: '',component: GeneralComponent },{
path: 'admin',loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),canActivate: [AuthGuard],data: { roles: [ERole.admin] },},{
path: 'login',component: LoginComponent
},{ path: 'register',component: RegisterComponent },{ path: 'logout',component: logoutComponent },{ path: '',loadChildren: () => import('./modules/general/general.module').then(m => m.GeneralModule) },];
@NgModule({
imports: [RouterModule.forRoot(routes,{ relativeLinkResolution: 'legacy' })],exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<app-web-header></app-web-header>
<app-admin-header></app-admin-header>
<div class="wrapper ">
<div>
<app-admin ></app-admin>
</div>
<div>
<app-user-home></app-user-home>
</div>
<div class="push"></div>
</div>
<br>
<app-web-footer></app-web-footer>
在这个标签中,app-admin 用于管理内容,而 app-user-home 是公开的, 我在 app-user-home 中有一个路由器插座,在 app-admin 中有一个 我正在尝试将 app-admin 的路由器插座命名为这样的
admin.component.html
<div class="container register" *ngIf="isAdmin">
<div class="row">
<div class="col-md-3 register-left">
<img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>
<h3>Welcome</h3>
<p>You are 35 seconds away from earning your own money!</p>
<input type="submit" name="" value="Login"/><br/>
</div>
<div class="col-md-9 register-right">
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Employee</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">Add your project</h3>
<div class="row register-form">
<router-outlet name='adminoutlet'></router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>
admin-routing.module.ts
const routes: Routes = [{
path: 'admin',//component: AdminComponent,// canActivate: [AuthGuard],// data: { roles: [ERole.admin]},children: [
{ path: 'projects',component: ProjectFolderComponent,outlet: "adminoutlet"
},{ path: 'projectCategory-create',component: CreateProjectCategoryComponent,{ path: 'projectCategory-list',component: ListProjectCategoryComponent,{ path: 'projectCategory/details',component: DetailsProjectCategoryComponent,{ path: 'firm-contact/create',component: CreateFirmContactComponent,outlet: "adminoutlet"
}
]
}];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class AdminRoutingModule { }
在 admin-header.component.ts 上创建这样的链接
public link1 = [{ outlets: { primary: ['admin'],adminoutlet: ['projectCategory-create'] } }];
public link2 = [{ outlets: { primary: ['admin'],adminoutlet: ['projectCategory-list'] } }];
并像这样在 admin-header.component.html 上使用它
<a class="dropdown-item" [routerLink]=link1>Create </a>
<a class="dropdown-item" [routerLink]=link2>View</a>
错误:未捕获(承诺):错误:无法匹配任何路由。 URLSegment:'projectCategory-create' 错误:无法匹配任何路由。 URLSegment: 'projectCategory-create'**
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)