Angular

Question

我正在发出一个事件，从子组件到父组件 像这样

子组件

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 访问的 component 而不是 tag 就像 <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 }
];

Answer 1

您可以通过服务将数据传递给您需要从中访问它的组件。

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

Answer 2

您可以使用 BehaviorSubject 从 RxJs 到 emit/trigger 从一个组件到另一个组件的事件。

假设我们有一个名为 common.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from '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 } from '../common.service';

constructor(private commonService: CommonService) {
  this.commonService.deleteProduct(100); //example id = 100
}

parent.component.ts

import { CommonService } from '../common.service';

constructor(private commonService: CommonService) {
  this.commonService.id$.subscribe((id) => {
    // here id = 100 received
    console.log(id); // from child component
  });
}

Angular - 使用 routerLink 在父组件上获取事件

Angular - Get Event on Parent Component using routerLink

angular2-routing

routerlink