Angular - Получить событие для родительского компонента с помощью routerLink - PullRequest
Новая
       15

Angular - Получить событие для родительского компонента с помощью routerLink

0 голосов
/ 22 июня 2019

Я испускаю событие от дочерний компонент до родительский компонент как этот

Дочерний компонент 

export class ItemComponent {

  @Output() id = new EventEmitter()

  deleteProduct(id) {
    this.id.emit(id)
  }

}

Тег дочернего компонента 

<app-product-item (id)="getId($event)"></app-product-item>

Получить событие для моего Родительского компонента 

getId(id){
  console.log(id)
}

Это работает нормально.

Теперь мне нужно такое же поведение, но с компонентом , к которому я получаю доступ через routerLink , а не с тегом , как <app-product-item (id)="getId($event)"></app-product-item>это не существует, потому что я обращаюсь к нему по routerLink .

Routing config: 

const routes: Routes = [
    { path: '', component: WinesComponent },
    { path: 'app-wines', component: WinesComponent },
    { path: 'app-about', component: AboutComponent },
    { path: 'app-wine-detail/:id', component: WineDetailComponent },
    { path: 'app-wine-add', component: WineAddComponent }
];

Ответы [ 2 ]

1 голос
/ 22 июня 2019

Вы можете использовать BehaviorSubject из RxJ для отправки / запуска события из одного компонента из другого компонента.

Предположим, у нас есть служебный файл с именем common.service.ts

import {Injectable} из '@ angular / core';import {BehaviorSubject} из 'rxjs'; 

@Injectable({
  providedIn: 'root'
})
export class CommonService {

  constructor() { }
    // Observable User details
    private id = new BehaviorSubject<any>('');
    id$ = this.id.asObservable();

    // user details
    deleteProduct(id: any) {
      this.id.next(id);
    }
}

child.component.ts

import {CommonService} из '../common.service ';

конструктор (private commonService: CommonService) {this.commonService.deleteProduct (100);// пример id = 100}

parent.component.ts

import {CommonService} из '../common.service';

constructor (private commonService: CommonService) {this.commonService.id $ .subscribe ((id) => {// здесь id = 100 получено от дочернего компонента console.log (id);});}

1 голос
/ 22 июня 2019

Вы можете передать данные через службу компоненту, к которому вам нужен доступ.

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

...