在 Angular 模板中，可以使用变量选择器来引用组件中的变量。变量选择器使用双括号（{{}}）包裹需要引用的变量名。例如，在组件中定义了一个属性 name，在模板中可以使用变量选择器来引用这个属性：

@Component({
  selector: 'app-greeting',
  template: '
Hello, {{name}}!
'
})
export class GreetingComponent {
  name: string = 'John';
}

在这个例子中，模板中的变量选择器 {{name}} 会被解析成 John，生成的 HTML 代码为

Hello, John!

除了双括号，还可以使用方括号（[]）和圆括号（()）来进行绑定。例如，使用方括号可以将模板中的 HTML 属性与组件的属性进行绑定：

@Component({
  selector: 'app-greeting',
  template: ''
})
export class GreetingComponent {
  name: string = 'John';
}

在这个例子中，使用方括号将 的 value 属性与组件的 name 属性进行双向绑定。输入框中的值会更新组件中的 name 属性，而 name 属性的变化也会更新输入框中的值。使用圆括号可以将模板中的事件与组件的方法进行绑定。在上面的例子中，当输入框的值发生变化时，会触发 input 事件，对应的组件方法 (input)="name = $event.target.value" 会被调用。该方法将输入框的值赋给了组件中的 name 属性。