Как дочерний компонент может контролировать видимость себя в родительском компоненте при инициализации дочернего компонента? - PullRequest
Новая
       7

Как дочерний компонент может контролировать видимость себя в родительском компоненте при инициализации дочернего компонента?

0 голосов
/ 09 ноября 2018

В родительском элементе есть два взаимозаменяемых дочерних компонента, видимость которых определяется родительской переменной showList 

<div id="parent">
   <app-child-1 *ngIf="showList"></app-child-1>
   <app-child-2 *ngIf="!showList"></app-child-2>
</div>

Как я мог управлять родительской переменной "showList" из дочернего компонента при его инициализации?

Я пытался изменить его с помощью Output и BehaviorSubject, но оба эти параметра не работают при инициализации.

1 Ответ

0 голосов
/ 09 ноября 2018

Похоже, showList является свойством родительского компонента. Это означает, что родительский компонент может установить свое значение. Вы хотите, чтобы дочерние компоненты «сообщали» родительскому компоненту, что они хотят отображаться? Если это так, вы должны объявить событие в дочернем компоненте и прослушать его вместе с родительским компонентом. Я предполагаю, что на дочернем компоненте будет элемент управления, который заставляет представление переключаться, поэтому в основном запросы дочернего компонента на скрытие не отображаются.

РЕДАКТИРОВАТЬ: Поскольку вы хотите, чтобы дочерние компоненты во время выполнения решали, какой из них отображать, вы не можете их скрыть с помощью *ngIf, потому что тогда, если они скрыты они даже не созданы, и они не могут запустить любой код, который заставляет их появляться снова. В этом случае вам нужно, чтобы они все присутствовали, но были скрыты от просмотра с помощью CSS.

Событие в дочернем компоненте может быть объявлено так: 

@Output() hideMe = new EventEmitter<any>();

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

<app-child-1 [class.hidden]="!showList" (hideMe)="showList=false"></app-child-1>
<app-child-2 [class.hidden]="showList" (hideMe)="showList=true"></app-child-2>

И сопровождающий CSS: 

.hidden { display: none; }

Тогда в логике вашего дочернего компонента, когда пришло время генерировать событие, вы должны сделать: 

this.hideMe.emit();
...