Угловой 2 Связь между компонентами на одном уровне

Question

Есть ли способ связи между двумя компонентами на на том же уровне с использованием событий emmiters?

Пожалуйста, ознакомьтесь с комментариями в прилагаемом фрагменте html.

<div class="custom-container"> 
 
    <div class="row"> 
 
    <div class="col-xs"> 
 
     <app-entity-listing (associationShown)=" TO DO " [isFromRoot]="isFromRoot"> 
 

 

 
     <!-- I am emiting a boolean value --> 
 
     </app-entity-listing> 
 
    </div> 
 

 
    <div class="col-xs-5"> 
 
     <div class="right-column-wrapper"> 
 
     <div class="main-container"> 
 
      <app-create-entity-screen-no-association [isVisible]="true"></app-create-entity-screen-no-associatio 
 

 

 
     <! -- Based on emitted value from the first component, I will be visible or not --> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

Вы можете создать родительский компонент (Parent), который содержит информацию о видимости дочернего компонента (РЕБЕНОК В). Из другого дочернего компонента (CHILD A) вы можете изменить видимость с помощью EventEmitter. См. Рисунок и код ниже.

import { Component, ViewChild, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <div style='background: red; padding: 10px; margin: 10px;'> 
    <app-parent></app-parent> 
    </div> 
    `, 
}) 
export class AppComponent { 
} 

@Component({ 
    selector: 'app-child-a', 
    template: ` 
    <h3>CHILD A</h3> 
    <button (click)='changeVisibility(true)'>Show</button> 
    <button (click)='changeVisibility(false)'>Hide</button> 
    `, 
}) 
export class ChildAComponent { 

    @Output() onVisibilityChanged = new EventEmitter<boolean>(); 

    changeVisibility(visible: boolean) { 
    this.onVisibilityChanged.emit(visible); 
    } 

} 

@Component({ 
    selector: 'app-child-b', 
    template: ` 
    <h3>CHILD B</h3> 
    `, 
}) 
export class ChildBComponent { 
} 

@Component({ 
    selector: 'app-parent', 
    template: ` 
    <h3>PARENT</h3> 
    <div style='background: green; padding: 10px; margin: 10px;'> 
    <app-child-a (onVisibilityChanged)='onVisibilityChanged($event)'></app-child-a> 
    </div> 
    <div *ngIf=visible style='background: blue; padding: 10px; margin: 10px;'> 
    <app-child-b></app-child-b> 
    </div> 
    `, 
}) 
export class ParentComponent { 

    visible = false; 

    onVisibilityChanged(visible: boolean) { 
    this.visible = visible; 
    } 

}