主页 / 问题 / 1003192
Accepted
FX_Sektor
Asked:2020-07-16 05:17:48 +0000 UTC2020-07-16 05:17:48 +0000 UTC

内部组件对外部 <router-outlet> 的引用。角 7

  • 772

这是一个简单的任务。我已经阅读了足够多的链接，但仍然无法达到预期的效果。有一个主要成分<mat-sidenav-container>。我们知道它有一个侧边栏<mat-sidenav>和一个主视图主体<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,
      },
    ]
  },

第一个链接是来自侧边栏的链接，它为我打开了所有对象的列表。好吧，因此，在 ngFor 循环中的每个对象上，我呈现一个列表，其中每个对象都有一个指向子组件的链接（产品详细信息）

<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>

但我只更改浏览器中的行，错误在控制台中攀升。他们到处都写着你需要在 article-section 子组件上多放一个出口。毕竟，主要出口属于<mat-sidenav-content>. 还没有其他人。好吧，我决定在文章部分页面上放另一个出口，它可以工作。但它显然在 html 页面上，现在产品详细信息与对象本身一起显示。不要雕刻相同的拐杖并手动隐藏对象列表。

<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>

我需要出口工作更高一级，从侧边栏翻译的那个。这个怎么安排？？？

angular2

1 个回答

  1. Best Answer

    所需要的只是更改路由器的路由系统并将组件从子组件移动到相邻的组件。

           {
      path: 'article-section',
       component: AllSectionComponent,
       children: [
            {
          path: 'article-section/:id',
          component: ArticleComponent,
        },
       ]

    并这样做

           {
        path: 'article-section',
        component: AllSectionComponent,
      },
      {
        path: 'article-section/:id',
        component: ArticleComponent,
      },
    • -1

相关问题