我创建了一个模板, example.component.html
这接收到一个方法作为一个变量,它的点击行动:
<div>
<button (click)="method()">click here</button>
</div>
在 example.component.ts
文件方法,该方法涉及从一个输入(),因此我可以使用这个模板,在多种情况:
@Component({
selector: 'example',
templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
@Input() method;
constructor() {}
ngOnInit(): void {}
}
这里是哪里变得复杂。 在父母分的方法,该方法将被触发点击使用的变量来自一个可观察到的:
parent-example.component.html
<example [method]="onClick"></example>
parent-example.component.ts
@Component({
selector: 'parent-example',
templateUrl: './parent-example.component.html',
})
export class ParentExampleComponent implements OnInit {
@Input() method;
business;
constructor(businessEntityService: BusinessEntityService) {
businessEntityService.entities$.subscribe(
data => (this.business = data),
);
}
onClick() {
console.log(this.business);
}
ngOnInit(): void {}
}
即使父母组件订阅 businessEntityService
可观察到的,我已经检查已经在事实数据,当我按一下按钮,控制台的记录 undefined
.
我明白这很可能与范围和堆正在寻找 this.business
在儿童组成的,但是我很想知道,如果有的无论如何称呼一个方法,该方法使用的可变从一个订阅自己的组件作为输入().