模板中的Angular 2主题标签是什么意思？

javascript html typescript angular

2022-08-30 01:23:38

我正在使用angular 2，我发现了类似的东西

<input #searchBox (keyup)="search(searchBox.value)"

它的工作原理。

但是，我不明白#searchBox的含义。我在文档中也没有找到任何明确的东西。

任何人都可以向我解释它是如何工作的吗？

答案 1

它是Angular 2模板系统中使用的语法，它将DOM元素声明为变量。

在这里，我为我的组件提供了一个模板URL：

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

模板呈现 HTML。在模板中，可以使用数据、属性绑定和事件绑定。这是使用以下语法完成的：

#- 变量声明

()- 事件绑定

[]- 属性绑定

[()]- 双向属性绑定

{{ }}- 插值

*- 结构指令

语法可以声明引用模板中 DOM 对象的局部变量名称。例如：#

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

答案 2

当您设置此#searchBox时，您可以在Typescript上获取此输入，例如

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

编辑

添加一些示例：https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview