Angular2范围和组件

时间:2016-02-15 10:26:20

标签: typescript angular angular2-directives angular2-services

所有

这就是我所拥有的:

用户list.component.ts

export class UserListComponent {

    public userSerivce: UserService;

    public deleteUser(id) {
        this.userSerivce.delete(id);
    }
}

用户list.component.html

 
<div>
    <some-reusable[deleteFunc]="delete" > </some-reusable><!-- this will bind "delete" on the user- list.component, to "deleteFunc" on  SomeReusableComponent-->
</div>

一些-reusable.component.ts

export class SomeReusableComponent {    
    @Input() deleteFunc: Function;    
}

一些-reusable.component.html

 
<button type="button" (click)="deleteFunc(entityId)" aria-label="Delete" >
    <span class="glyphicon glyphicon-trash" aria-hidden="true"> </span>
</button>

这是我的问题:

当我点击按钮时,它会调用UserListComponent上的功能就好了,但是当提及this它也引用SomeReusableComponent时,我明白为什么会这样,但是我在寻找解决方案?您可以在上面的示例中看到,对this.userSerivce.delete(id);的调用将失败,因为userService上不存在SomeReusableComponent

我希望上面的例子有意义。

由于

史蒂夫

2 个答案:

答案 0 :(得分:2)

完全同意@Günter!

关于您的this问题,这是因为您在引用某个函数时(即使是来自对象)丢失了this。为防止这种情况发生,您可以使用bind函数方法:

delete.bind(this)

答案 1 :(得分:1)

我认为更好的方法是使用事件绑定

export class SomeReusableComponent {    
    @Output itemDeleted:EventEmitter = new EventEmitter();

    handleDelete(entityId) {
      itemDeleted.emit(entityId);
    }
}
<button type="button" (click)="handleDelete(entityId)" aria-label="Delete" >
    <span class="glyphicon glyphicon-trash" aria-hidden="true"> </span>
</button>
<some-reusable (itemDeleted)="delete($event)" > </some-reusable>