所有
这就是我所拥有的:
用户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
。
我希望上面的例子有意义。
由于
史蒂夫
答案 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>