通过输出绑定AngularJS传递参数

问题描述 投票:0回答:1

我必须使用 Typescript 进行 AngularJs 1.5.8 的设置:

我有一个包含目录(项目的二维数组)的父组件。从这里我将目录中的每个列表传递给子组件:

...
export class ParentController {

    private catalog = []; //contains a list of lists

    ...

    private printCallback(item: any): void {
        console.log(item);
    }
}

和模板:

<div ng-repeat="list in $ctrl.catalog">
    <child content="list" callback="$ctrl.printCallback(item)"></child>
</div>

现在在子组件中,我再次迭代列表中的每个项目。每当我单击列表中的某个项目时,我希望家长知道我单击的项目:

export class ChildComponent implements IComponentOptions {
template: any = require('./child.component.html');
public bindings: any = {
    content: '<',
    callback: '&'
};
controller: any = ChildController;
}

export class ChildController {

    public content: Array<any>;
    public callback;

    ...

    public onTrigger(item: any): void {
        this.callback(item);
    }
}

子模板:

<div ng-repeat"item in $ctrl.content">
    <button ng-click="$ctrl.onTrigger(item)">{{item.name}}</button>
</div>

现在我似乎无法在父组件的 printCallBack() 中打印 item 。我不知道我到底做错了什么,因为唯一打印的是未定义。 我环顾四周,找不到可行的解决方案。所以我希望你能帮助我。

javascript angularjs typescript binding
1个回答
5
投票

回调时,像这样:

this.callback({item : item});
,作为对象传递。

© www.soinside.com 2019 - 2024. All rights reserved.