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 访问的组件，而不要像{{1 }}这个不存在，因为我正在通过 routerLink 访问它。

路由配置：

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

Answer 1

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

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

Answer 2

您可以使用RxJ中的BehaviorSubject从另一个组件的一个组件发出/触发事件。

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

从“ @ angular / core”导入{Injectable}；从'rxjs'导入{BehaviorSubject};

@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

从'../common.service'导入{CommonService};

构造函数（       私人commonService：CommonService）{this.commonService.deleteProduct（100）; // example id = 100}

parent.component.ts

从'../common.service'导入{CommonService};

构造函数（       私人commonService：CommonService）{this.commonService.id $ .subscribe（（id）=> {//这里id = 100   来自子组件console.log（id）; }）; }

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

2 个答案: