Angular Parent / Children click events: Показывать дочерний компонент в parent после события click для другого дочернего элемента в родительском компоненте?

Question

Я на пару недель изучаю Angular 7 и пытаюсь скрыть / показать дочерний компонент <app-child-2> в родительском компоненте <parent> после события щелчка на отдельном дочернем <app-child-1> в том же родительском компоненте.

Все дочерние карты отображают divs только , если они имеют данные, это делается с помощью метода ngIf из родительских shouldCardRender() и outputsMapToRead('Child 1').Метод shouldCardRender() используется для проверки, является ли объект данных groupName checked: true с помощью другого метода в родительском объекте, называемого this.checkIfCardHasAnyCheckedValues(), перед его отображением.Если значение false, оно не отображается на родительском объекте, если значение true, выполняется другой метод, который передает все истинные данные в дочерний компонент.

Вот как установлены оба дочерних элемента в родительском компоненте.

<div *ngIf="shouldCardRender('Child 1')">
        <app-child-1 [outputsArray]="outputsMapToRead.get('Child 1')" [rawData]="rawData"></app-child-1>
</div>

<div *ngIf="shouldCardRender('Child 2')">
        <app-child-2 [outputsArray]="outputsMapToRead.get('Child 2')" [rawData]="rawData"></app-child-2>
</div>

Я полагаю, что [outputsArray]outputsMapToRead.get('Child #') - это данные, которые классифицируют groupName для этого дочернего элемента, и каналы подают истинные данные для дочернего элемента в зависимости от groupName.

Вот пример объекта данных, который shouldCardRender() & this.checkCardValues() проверка.Если установлено значение true, карта отображается.Обратите внимание, что обычный объект имеет около 20 объектов внутри него, если эти объекты истинны, другой метод предоставляет этим картам доступ к данным для подключаемого и играющего ребенка, сейчас все «проверенные» ключи установлены на true.

outputsMap.set('Child 1',  [
    {
      name: 'fraudScore',
      friendlyName: 'Fraud Score',
      checked: true, 
      groupName: 'Child 1'
    }, 
    .....
  ]);

outputsMap.set('Child 2',  [
    {
      name: 'displayName',
      friendlyName: 'Display Name',
      checked: true, 
      groupName: 'Child 2'
    }, 
    .....
  ]);

Моя проблема в том, что на <app-child-1> есть кнопка с надписью "Показать <app-child-2>".Я изо всех сил пытаюсь заставить <app-child-2> скрыть / показать, так как это в настоящее время зависит от shouldCardRender и объекта данных от [outputsArray].

Полагаю, мне нужно использовать @Output и EventEmitter на ребенке и заставить его всплывать до родителя.Но я наталкиваюсь на дорожный блок с логикой, необходимой, чтобы превратить данные в ложные, чтобы скрыть компонент.Я также думал об изменении проверенного ключа на false и создании метода для потомка или родителя?это превращается в true.

Любая помощь будет оценена, спасибо.

Answer 1

Хорошо, прежде чем начать говорить о решении; я хочу описать что-то важное о родительских / дочерних компонентах.

• Для передачи данных из Родительский в Детский .
• Вы должны использовать @Output() украшение для передачи данных от Child к Parent .

Вы можете прочитать больше о документации .

• @Input() представлено в формате html с использованием привязки свойства как:

<child1 [name]="'testing'"></child1>

Это означает, что child1 компонент имеет переменную с именем name, которая получает значение от parent component.

• @Output() представлено в формате html с использованием привязка события как:

<child1 (rebuild)="doSomething($event)"></child1>

Что означает, что child1 компонент имеет EventEmitter , называемый rebuild, который возвращает значение некоторого типа, и мы получаем это значение в родительском компоненте, используя $ event .

Как это может вам помочь?

Я сделал вам пример, как обращаться с вашим делом, отметьте его здесь .

каждый дочерний компонент в этом примере имеет кнопку для отображения другого компонента, при нажатии этой кнопки; дочерний компонент будет передавать значение boolean, которое будет получено из parent и использовано в *ngIf.

Надеюсь, вам поможет.