如何绑定到Angular模板引用变量？

1. 在指令或组件中声明一个模板引用变量。例如，在组件中声明一个模板引用变量myVar。

@Component({
  selector: 'app-my-component',
  template: `
    <span #myVar>Some element</span>
  `
})
export class MyComponent {}

2. 在模板中使用模板引用变量。可以在模板中使用模板引用变量来引用组件或指令。

<app-my-component #myComp></app-my-component>
<p>{{myComp.title}}</p>

3. 在组件或指令的代码中使用@ViewChild装饰器来访问模板引用变量。

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <span #myVar>Some element</span>
  `
})
export class MyComponent {
  @ViewChild('myVar') myVar: ElementRef;

  ngAfterViewInit() {
  	console.log(this.myVar.nativeElement.textContent);
  }
}

这样，在模板中模板引用变量myVar就被绑定到组件或指令MyComponent中，并且可以在组件或指令代码中通过@ViewChild来访问该变量。