Скрыть родительский вид в угловом 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

Следующее должно сделать трюк .... не так оптимально это решение, но по крайней мере оно работает по вашему желанию. Так просто обернуть вещи, которые вы хотите скрыть внутри DIV с логическим значением, например

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

И просто установить, что логическое значение ложь в одной и ту же функции, где вы обработку события нажатия некоторого поля в родительском компе.

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

Answer 2

Сделать отдельный компонент для одного из родителей вы назвали (ParentComponent) и для того, вы назвали ребенка (ChildComponent). Затем вы можете настроить маршрут, который загружает ParentComponent или ChildComponent в маршрутизатор-выход в вашем шаблоне. Таким образом, ParentComponent и ChildComponent находятся на одном уровне маршрута. Вы должны изменить их имена, чтобы иметь смысл.

Answer 3

В родительском компоненте, вводят активированный маршрут как так:

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 будет показано только тогда, когда пользователь находится на самом родительском компоненте, но не является ли пользователь на дочернем компоненте.