Как передать данные от одного компонента к другому в Angular?

Question

У меня возникла проблема с тем, что не могу сделать всплывающую форму.

У меня есть два компонента. Первый HEADERCOMPONENT, второй POPUPCOMPONENT.

В HEADERCOMPONENT у меня есть кнопка, которая изменяет состояние toggle c true на false:

HEADER.COMPONENT

@Component({
    selector: 'app-header',
    template: `<header class="header">
                 <h1 class="title">
                   Задачи
                 </h1>
                 <button class="material-icons">add
                 </button> 
                 <button mat-raised-button (click)="popupToggle()">Отмена</button>
                 <app-popup [toggle]="toggle" *ngIf="toggle"></app-popup> 
               </header>`,
    styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
    public toggle = false;
  
    ngOnInit(): void { 
    }
    
    public popupToggle() {
        this.toggle = !this.toggle;
        console.log(this.toggle);
    }
}

В другом компоненте у меня есть кнопка отмена, которая должна изменить состояние тем самым закрыть форму. Подскажите ,пожалуйста, как это сделать.

POPUP.COMPONENT

@Component({
    selector: 'app-popup',
    template: `<div   class="popup">
                 <button mat-raised-button (click)="popupToggle()" >Отмена</button>
               </div>`,
    styleUrls: ['./popup.component.css']
})

export class PopupComponent implements OnInit {

    @Input() toggle = false;
    
    ngOnInit(): void {
    }

    public popupToggle() {
        this.toggle = !this.toggle;
        console.log(this.toggle);
    }
}

Answer 1

Похоже, вам нужно что-то типа вот этого:

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

//...
export class PopupComponent implements OnInit {
    // Объект toggled (типа EventEmitter) нужен для оправки события
    @Output() toggled = new EventEmitter<bool>();
    @Input() toggle=false;

    public popupToggle(): void {
        this.toggle = !this.toggle;

        // Отправляем событие подписчикам-слушателям
        this.toggled.emit(this.toggle);
    }
}

Теперь в вашем основном компоненте:

//html
...
<app-popup [toggle]="toggle" *ngIf="toggle" (toggled)="onPopupToggled($event)"></app-popup> 
...

//ts
export class HeaderComponent ... {
    // Метод-реакции на нажатие кнопки
    onPopupToggled(event: bool) {
        //Кнопка нажата
        console.log(event);
    }
}

БЛОГ НА HUSL

Как передать данные от одного компонента к другому в Angular?

Ответы (1 шт):