以角度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)
  }
}

现在,您可以使用children属性route来确定当前组件是否是路径树中的叶组件.与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 月

您可以从父路由中删除组件。请参阅此处的示例

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

Answer 3

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