要将Angular组件渲染成DOM中的某种东西,你需要在Angular组件中结合一个DOM元素,我们称这些叫host元素。

一个组件可以用以下方式于其host DOM元素进行交互

  • 它可以监听其事件。
  • 它可以更新它的属性。
  • 它可以调用它的方法。

例如,组件可以使用host事件监听输入,对输入值进行处理及将其存储在一个字段中,angular会于DOM同步已存储的值

@Component({
  selector: 'trimmed-input',
  host: {
    '(input)': 'onChange($event.target.value)',
    '[value]': 'value'
  }
})
class TrimmedInput {
  value: string;
  onChange(updatedValue: string) {
    this.value = updatedValue.trim();
  }
}

host元素也可以替换成 @HostBinding和@HostListener

Angular2中的host的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. 如何在Angular2中使用Forms

    在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...

  3. golang中设置Host Header的小Tips

    前言 笔者最近时间一直在学习和写Ruby和Go,尤其是Go,作为云计算时代的标准语言,写起来还是相当有感觉的,难过其会越来越火. 不过写的过程中,也遇到了一些小问题,本文就是分享关于go语言设置 HT ...

  4. 【转】nginx中proxy_set_header Host $host的作用

    nginx为了实现反向代理的需求而增加了一个ngx_http_proxy_module模块.其中proxy_set_header指令就是该模块需要读取的配置文件.在这里,所有设置的值的含义和http请 ...

  5. Angular2中Input和Output

    @Input @Input是用来定义模块的输入的,用来让父模块往子模块传递内容: @Output 子模块自定义一些event传递给父模块用@Output. 对于angular2中的Input和Outp ...

  6. SpreadJS 在 Angular2 中支持哪些事件?

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...

  7. SpreadJS 在 Angular2 中支持绑定哪些属性?

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...

  8. RestTemplate中headers中添加Host不生效

    在使用restTemplate访问内网接口时,不打算指host,支持ip访问,所以我们需要再header中指定host.但经调试,发现HttpURLConnection中Host无法覆盖.解决方案: ...

  9. ionic2+angular2中踩的那些坑

    好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了 ...

随机推荐

  1. Java笔记(十八)……包

    概述 对类文件进行分类管理. 给类提供多层命名空间. 写在程序文件的第一行. 类名的全称的是 包名.类名. 包也是一种封装形式. 访问权限 引用<The Complete Reference&g ...

  2. BZOJ1997 [Hnoi2010]Planar (2-sat)

    题意:给你一个哈密顿图,判断是不是平面图 思路:先找出哈密顿图来.哈密顿回路可以看成一个环,把边集划分成两个集合,一个在环内,一个在外.如果有两条相交边在环内,则一定不是平面图,所以默认两条相交边,转 ...

  3. Ubuntu13.04配置完全指南(转)

    Ubuntu13.04配置完全指南(一)软件源 教育网推荐使用USTC软件源. 首先备份现有软件源: $ sudo cp /etc/apt/sources.list /etc/apt/sources. ...

  4. ambari安装过程中的问题汇总

    今天重新安装ambari过程中,遇到了几个问题,耗费了我很长时间,在此记录一下 ambari重新安装可参考我之前的一篇随笔 http://www.cnblogs.com/6tian/p/4097401 ...

  5. 【Java基础】泛型的一些总结

    什么是泛型 泛型其实可以理解为一种广泛的类型,啥类型都型,当然,这种泛是指定义时可以广泛,但是使用时必须确定类型.也就是说,当不清楚未来使用哪种类型时,定义为泛型.可以支持泛型类,泛型接口,泛型方法, ...

  6. Tuple元组

    Tuple元组 Tuple 是 Storm 的主要数据结构,并且是 Storm 中使用的最基本单元.数据模型和元组. Tuple 描述 Tuple 就是一个值列表, Tuple 中的值可以是任何类型的 ...

  7. mysql group by 用法解析(详细)

    在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的 ...

  8. 学习并使用了两种linq to entity 的实现sql关键字in的查询方法

    //构造Lambda语句        private static Expression<Func<TElement, bool>> BuildWhereInExpressi ...

  9. 11.编写一个Java程序,计算半径为3.0的圆周长和面积并输出结果。把圆周率π定义为常量,半径定义为变量,然后进行计算并输出结果。

    package com.hanqi.yzljs; public class yzljs { public static void main(String[] args) {     final dou ...

  10. C# LINQ详解(一)

    原文标题:How does it work in C#?-Part 3 (C# LINQ in detail),作者:Mohammand A Rahman. 目录 LINQ 基础 扩展方法-幕后的工作 ...