Angular2 入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

#var - 局部变量

有时模板中的不同元素间可能需要互相调用,Angular2提供一种简单的语法将元素 映射为局部变量:添加一个以#var-开始的属性,后续的部分表示变量名, 这个变量对应元素的实例。

在下面的代码示例中,我们为元素h1定义了一个局部变量v_h1,这个变量指向 该元素对应的DOM对象,你可以在模板中的其他地方调用其方法和属性:

@View({
    template : `
        <h1 #v_h1>hello</h1>
        <button (click) = "v_h1.textContent = 'HELLO'">test</button>
    `
})

如果在一个组件元素上定义局部变量,那么其对应的对象为组件的实例:

@View({
    directives:[EzCalc],
    template : "<ez-calc #c></ez-calc>"
})

在上面的示例中,模板内的局部变量c指向EzCalc的实例。

为示例代码的变色按钮添加事件监听,点击该按钮时,将EzApp组件的h1标题 变为黑色背景,白色字体!