首页 文章

Angular 2如何将params函数传递给子组件？

提问于
浏览 次
2

当函数接受参数时，如何将函数从父组件正确传递给子组件？

在ngOnInit中，如何定义一个函数：

addToList(id) {
  this.store.dispatch(this.listActions.addToList(id));
}

ngOnInit，现在这是错的 .

ngOnInit() {
  this.addToList = this.addToList.bind(this, id);
}

在我的父组件中，我有 addToCart(id) 函数 .

我想将该函数传递给我的子组件，它包含一个项目列表，并且单击项目上的ADD按钮，我想将addToCart（item_id）回调给父项 .

javascript angular typescript

2 回答

  • 1

    @ Maarek的回答是好的，可能是“正确”的做法 . 我在这里介绍的是一种更简单的从儿童到父母的沟通方式 .

    您在原始帖子中提出的建议是让Parent向Child发送回调方法，因此Child可以在适当时使用数据调用它 . 使用事件来完成此特定任务（从Child到Parent的某些操作的数据）是合适的，使用Child内部的EventEmitter . 请参阅此API参考，其中有一个示例：https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html和我作为演示版制作的Plunker：https://embed.plnkr.co/T1wFqVOhMXgX6NRfTuiC/

    在孩子中，你有这样的代码：

    import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'item',
  template: `
    <div class="item">
      <button type="button" (click)="addItem()">Add</button>
      <p>{{id}}
    </div>
  `
})
export class ItemComponent {
  @Input() id: string;
  //key line here: this emitter can be bound to by parent to get notifications
  @Output() add: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  addItem() {
    //then when the button is clicked, emit events to the parent.
    this.add.emit(this.id);
  }
}

    Parent会调用这样创建组件：

    <item id="1" (add)="addToList($event)"></item> 其中 addToList() 是Parent上的一个函数，它执行您的回调要执行的工作 . $ event是从子进程传递的数据（id） .

    回复于
  • 5

    在那里收集's not a lot of detail here, but from what I'm我认为你想要的是一个注射服务（在这里演示：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html）来处理组件之间共享的数据对象 . 而不是在这里输入一堆代码（在教程的那个页面上更好地显示），我正在尝试做以及如何去做 .

    可以通过服务（store.service.ts）处理整个商店数据模型 . 这将为您的商店模型的不同属性公开您的CRUD功能 . 您要添加到此处的列表应该有一个公共getter，它返回服务中列表的observable以及用于在列表中添加和删除的公共函数 . 像这样的东西：

    @Injectable
export class StoreService {
  private _storeList:BehaviorSubject<Array<any>> = new BehaviorSubject<Array<any>>([]);

  /*I'm sure the store has other properties, set them up here. I'd suggest
    breaking any arrays out of the general object (unless you want to use
    pipes which are awesome but keeping it simple here) but if the store has
    a lot of general properties (name, address, whatever) they can be stored 
    in a single BehaviorSubject of type any.
  */

  constructor(){}

  get StoreList() { return this._storeList.asObservable() }

  public addToList(id) {
      let curVal = this._storeList.getValue();
      curVal.push(id);
      this._storeList.next(curVal);
  }

}

    然后，您将此服务注入父级和子级 constructor(private _storeService:StoreService){} （以及需要它的任何其他组件）的构造函数中 . 然后，孩子可以订阅列表： get List() { return this._storeService.StoreList } ，父母可以调用add函数添加到列表中 . 有一点需要注意，当您将此模板作为* ngFor添加到模板时，请确保通过异步管道传递该值 . *ngFor="List | async" 或者你可能会撕掉你的头发试图找出你为什么会出错 .

    这篇文章也为我提供了很多帮助（虽然我可能会建议在你完全熟悉Angular 2之前避免不可变）：http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

    回复于

相关问题