Как связать компоненты в Angular 8?

Question

Надеюсь, это простой вопрос, но я немного застрял. У меня есть следующая структура:

Компонент A

<ng-template [ngIf]="flaggedRecords">
...
<button (click)="showComparisonWindow(pi);">MERGE RECORDS</button>
...
</ng-template>
<ng-container *ngIf="showMergeCompare">
  <app-component-B></app-component-B>
</ng-container>

Компонент B

<div>
...
<li><button type="button" (click)="closeMerge()"></button><li>
...
</biv>

У меня есть Компонент A со списком записей и кнопок, которые должны скрывать вид Компонента A и отображать содержимое Компонента B. Компонент B имеет кнопку X, которая должна закрыть Компонент B и снова показать Компонент A.

Я описал в компонент-A.ts

public showComparisonWindow(pi: number) {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

Это работает для меня!

НО, если я сделаю то же самое для closeMerge () в компоненте-B.ts:

public closeMerge() {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

Это не работает. Никаких ошибок, просто ничего не случилось. По логике это должно переключать представление, но это не так.

Как заставить его жить? Заранее спасибо!

Answer 1

Вы можете использовать @Output & EventEmitters, поэтому по сути просто передайте событие click родительскому Компоненту A.

В Компоненте B

<li><button type="button" (click)="sentCloseMerge()"></button><li>

@Output() componentBClicked= new EventEmitter();

public sentCloseMerge() {
    this.componentBClicked.emit();
}

В компоненте A

<app-component-B (componentBClicked)='closeMerge()'></app-component-B>

public closeMerge() {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

Я точно не знаю, имеет ли синтаксис 100%, поэтому я не просто скопировал бы вставку, но это идея! Это помогает?

Answer 2

Компонент B является дочерним для компонента A. Вы можете прочитать эту статью о совместном использовании данных между Angular Компонентами. Используйте EventEmmiter для прослушивания событий от каждого компонента