angular - 从上层组件。角 7
问题描述
我有<mat-sidenav-container>
我用<mat-sidenav>
和<routeroutlet>
在里面做导航<mat-sidenav-content>
<mat-sidenav-content class="body-sidenav">
<router-outlet></router-outlet>
</mat-sidenav-content>
这是工作好
我的路由器
{
path: 'article-section',
component: AllSectionComponent,
children: [
{
path: 'article-section/:id',
component: ArticleComponent,
},
]
},
我需要这个模板
正如我不明白的那样,我需要<routeroutlet>
AllSectionComponent 中的下一个
这样的
<router-outlet></router-outlet>
<div class="center-folder">
<div class="row">
<div *ngFor="let item of articleSection"
style="width: 100px; margin-right:10px; margin-left: 10px; margin-
bottom: 10px;">
<img class="img-section" src="assets/images/docimgaes/section.png" />
<br>
<a [routerLink]="['/article-section', 1]">
<div class="name-section">{{item.name}}</div>
</a>
</div>
</div>
</div>
但是在这种情况下,我在 AllSectionComponent 的头部打开对象的组件:)。我有两个html。<routeroutlet>
我需要在其中正常打开 <mat-sidenav-content>
。我需要名称 routeroutlet 还是有更舒适的决定???
解决方案
我只需要它来改造我的路由器。
由此
我的路由器从此
{
path: 'article-section',
component: AllSectionComponent,
children: [
{
path: 'article-section/:id',
component: ArticleComponent,
},
]
对此
{
path: 'article-section',
component: AllSectionComponent,
},
{
path: 'article-section/:id',
component: ArticleComponent,
},
推荐阅读
- bluetooth - 我可以使用蓝牙 4.0 设备知道蓝牙 5.1 信标的位置吗?
- graphql - 在 GraphQL 中,您可以更改别名中的输出结构吗?
- docker - 如何在 docker-compose 中使用 docker 容器选项
- reactjs - 蚂蚁设计
创建表单的静态数组 - ios - 终止应用程序后将图像保存在 NSCache 中
- angular - Ng2 Smart Table 设置过滤器列表中的选定项
- tensorflow - 如何使用 Keras 获取 val_loss 和 val_acc 指标
- javascript - 运行进度条,每个循环的时间间隔都在变化
- javascript - 通过 SVG 元素上的 onclick 函数重定向到其他 HTML
- android - Android 通过 CallScreeningService 阻止的呼叫有时会响铃