ngTemplateOutlet用户可以通过静态类型化的方式使用吗?

时间:2018-12-23 18:19:30

标签: angular typescript

例如,我有此代码

@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
    }
  }
}

有什么办法可以实现?

0 个答案:

没有答案