我对 Angular 4 路由器和组件有一些问题。我想做什么。我有一个视图(超级用户(,其中包含 2 个小块(侧边菜单和内容(。
在路由器中,我有 2 个孩子的超级用户(侧菜单和内容(,有自己的路由器,但我得到无法匹配任何路由。URL 段:http://localhost:4200/superuser/contexts uri 上的"超级用户/上下文"。源波纹管。
应用路由器
export const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "superuser",
component: SuperuserComponent,
children:[
{
path: "",
component: SideMenuComponent,
outlet: 'superuser-sidemenu'
},
{
path: "contexts",
component: ContextsComponent,
outlet: 'superuser-content'
}
]
},
{
path: "",
redirectTo: "/home",
pathMatch: "full"
}
]
超级用户组件.html
<div class="py-5 public-area-body-background">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div id="superuser-sidemenu">
<router-outlet name="superuser-sidemenu"></router-outlet>
</div>
</div>
<div class="col-md-10">
<div id="superuser-content">
<router-outlet name="superuser-content"></router-outlet>
</div>
</div>
</div>
</div>
</div>
侧边菜单组件.html
<div class="card text-white p-5 bg-light shadow sidemenu">
<div class="card-body sidemenu">
<h4 class="mb-4 text-dark" >Main Menu</h4>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Context...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
上下文组件.html
<div class="card text-white p-5 bg-light shadow">
<div class="card-body">
<p>Content here</p>
</div>
谢谢!
如果您正在实现带有儿童插座的组件,最好将其作为模块。在您的情况下,您可以创建更多文件,例如super-user.module.ts和super-user-routing.module.ts。
希望您在 app.module.ts 中声明了所有这些组件。这不是一个好的做法,将来你的应用会变慢。因此,从 app.module 中删除 SuperUserComponent、SideMenuComponent 和 ContextsComponent 的声明,并在新的 super-user.module.ts 文件中声明它们。另外,您可以在superUser中创建一个新组件,并显示当前SuperUserComponent.html的内容,并且SuperUserComponent.html文件应该只包含一个<router-outlet></router-outlet>
将 app.router 的代码更改为
export const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: 'superuser',
loadChildren: './super-user/super-user.module#SuperUserModule'
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
]
最后是超级用户路由.module.ts 作为
export const routes: Routes = [
{
path: '',
component: SuperUserComponet,
children: [ { path: 'view', component: ListComponent},
path: 'context', component: ContextSComponent},
...]
]
现在,您可以从任何位置routerLink="/superuser/context"
访问这些组件,依此类推。要查看 super-user.component 的当前视图.html您需要使用 routerLink="/superuser/list"