Angular — получить событие в родительском компоненте с помощью routerLink

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

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

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.

Конфигурация маршрутизации:

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 }
];

angular routerlink angular2-routing
person Hugo Seleiro    schedule 22.06.2019    source источник
comment
Используйте сервисы для связи между компонентами.   -  person dcg    schedule 22.06.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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

импортировать {Injectable} из '@angular/core'; импортировать {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

импортировать {CommonService} из '../common.service';

конструктор (частный commonService: CommonService) { this.commonService.deleteProduct (100); //идентификатор примера = 100 }

parent.component.ts

импортировать {CommonService} из '../common.service';

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

person Raghul Selvam    schedule 22.06.2019

arrow_upward
1
arrow_downward

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

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

person kszalai    schedule 22.06.2019