例如,我有此代码
@Component({
selector: 'mouse',
template: `
<div style="height: 100%" (mousemove)="handleMouseMove($event)">
<ng-container *ngTemplateOutlet="template; context: state" ></ng-container>
</div>
`,
})
export class Mouse {
@ContentChild(TemplateRef) template;
state = { x: 0, y: 0 }
handleMouseMove(event) {
this.state = {
x: event.clientX,
y: event.clientY
}
}
}
@Component({
selector: 'app-root',
template: `
<div style="height: 100%">
<mouse>
<ng-template let-x="x" let-y="y">
<h1>The mouse position is ({{x}}, {{y}})</h1>
</ng-template>
</mouse>
</div>
`,
})
export class AppComponent {}
如果在Mouse类中将y
更改为z
,我会遇到编译错误
export class Mouse {
@ContentChild(TemplateRef) template;
state = { x: 0, z: 0 }
handleMouseMove(event) {
this.state = {
x: event.clientX,
z: event.clientY
}
}
}
有什么办法可以实现?