在Angular中，当父元素被路由到子元素时，隐藏父元素。

Question

所以我有一个父组件 tours，其中有一个列表。当点击一个列表项目时，它就会路由到 /tours/tour-one，也就是该特定旅游的细节。

我的问题是：当细节被路由时，我想让父组件的所有元素(tours)在视图中不可见。最初，我是在主细节视图中使用 ngIf 和 services 但现在我被迫使用Routing，这也是比较好的，但我无法得到想要的UI。

下面是我的 tours.component.html:

<div class="tours-left">
      <div class="tours-info main-text">
        <div class="tours-list-wrapper">
          <div class="tours-thumbs">
            <div class="tour-container" [routerLink]="['/tours', tour.sys.id]" *ngFor="let tour of toursThumbs">
              <figure class="tour-image">
                <picture>
                  <img
                  src="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.file.url }}"
                  alt="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.description }}"
                  title="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.title }}"
                  [target]="tourBackgroundImg" dynamicBackgroundImg />
                  <figcaption><span>{{ tour.fields.tourTitle }}</span></figcaption>
                </picture>
              </figure>
            </div>
          </div>
        </div>
        <router-outlet></router-outlet>
       </div>

从HTML中，我希望所有的东西都在 div.tours-list-wrapper 的时候，将其从DOM中隐藏或删除。tours/<tour detail>

任何意见都非常感谢! :)

Answer 1

根据我的理解，你需要把详情页替换成列表页。

如果你有根 router-outlet 中，然后您可以直接删除该应用程序组件中的 <router-outlet></router-outlet> 从你的代码，它应该按照你的要求工作。Angular会用新的页面替换整个页面。