在角度2中隐藏父视图

Question

我必须隐藏上面的父视图。

以下是我的代码。当我单击任何一个框时，父级应该隐藏子级应该出现。

        <app-navbar></app-navbar>
        <div class="container" [style.height]='height' style="margin-top: 7%;">
            <div class="row box_rpad">
                <app-box-layout 
                                (display)="onDisplay($event)" 
                                *ngFor="let color of colors let i=index" 
                                [color]='color.hex' 
                                [text]='color.name' 
                                [id]='i'>
                </app-box-layout>               
            </div>
        </div>

        <!-- CHILD ROUTES -->
        <div class="container">
            <router-outlet></router-outlet> 
        </div>

Answer 1

在父组件中，像这样注入激活的路由：

class ParentComponent {
  constructor(public route: ActivatedRoute)
  }
}

现在可以使用route 上的children 属性来判断当前组件是否是路由树中的叶子组件。与ngIf 一起，可以用来隐藏部分视图：

<div *ngIf="route.children.length === 0">
  Some content that should only be shown when the user is at the parent component itself.
</div>

<router-outlet></router-outlet>

在上面的示例中，div 只会在用户位于父组件本身时显示，但不会在用户位于子组件时显示。

Answer 2

2021 年 1 月

您可以从父路由中移除组件。 See example here

{
    path: 'parent',
    //component: ParentComponent,
    children: [
      { path : '', pathMatch:'full', component: ParentComponent},
      { path: 'child', component: ChildComponent },
    ],
  }  

Answer 3

为您称为父组件（ParentComponent）和您称为子组件（ChildComponent）的组件制作单独的组件。然后，您可以设置一个路由，将 ParentComponent 或 ChildComponent 加载到模板中的路由器插座中。这样做，ParentComponent 和 ChildComponent 处于同一路由级别。你必须改变他们的名字才有意义。

Answer 4

以下应该可以解决问题....这个解决方案不是那么理想，但至少它可以按您的意愿工作。因此，只需使用布尔值将要隐藏的内容包装在 div 中，例如

<div *ngIf="notSelected">
  <!-- your code here -->
</div>

只需在处理单击父组件中某个框的事件的同一函数中将该布尔值设置为 false。

clicked() {
  ....
  this.notSelected = false;
}

要在从子导航返回父时通知父需要再次显示，您可以使用Subject。所以在你的父母中声明一个主题：

public static showParent: Subject<any> = new Subject();

并在您的父构造函数中订阅更改：

constructor(...) {
  ParentComponent.showParent.subscribe(res => {
     this.notSelected = true; // show parent component
  })
}

在您的孩子中，在导航回父母之前，无论该事件可能是什么：

returnToParent() {
  ParentComponent.showParent.next(false);
  this.router.navigate......
}