学习
实践
活动
专区
工具
TVP
写文章

Angular2 之 结构型指令几个概念

Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令。是这三种指令中最常用的,我们会编写大量的组件来构建application。 属性型指令 属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。 我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。 NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 总结 基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。 自定义指令 我们自顶一个类似ngIf的指令

21920
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Angular2学习笔记

    不过还好,经过这一段时间的倒腾,好歹把Angular2的东西稍微消化了一点,相比啥都不会,也算是有点收获吧。 基础配置 刚学习Angular2的时候,是照着他的中文文档上来的。 现在基本上都是用angular-cli来组织文件,这个项目对Angular2提供了强大的支持,我们用起来也比以前方便了很多。 开发细节 Angular2这类MVVM架构的框架跟传统的MVC框架有很大的不同,不过主要需要考虑的就是下面这几个部分: 模板。主要是模板语言部分以及在模板中使用组件的变量等等。 数据绑定。 但是他也有很多的缺点,Angular2文档中列举了下面几点: 渲染得更快; 需要的异步请求更少; 需要下载的Angular框架体积更小; 提早检测模板错误; 更安全; 于是,Angular2又提出了一个新的编译方法叫 参考文章 angular-cli angular中文文档 nginx发布Angular2

    11210

    Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

    绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。 Angular指令可分为三种 组件 属性型指令 结构型指令 今天来学习一下属性型指令。 属性型指令把行为添加到现有元素上。 属性型指令用于改变一个 DOM 元素的外观或行为。 创建一个属性型指令 -- 初级应用 自己创建属性型指令的必要条件: import { Directive, ElementRef, Input, Renderer } from '@angular/core ElementRef注入到指令构造函数中。 这样代码可以访问 DOM 元素。 Input将数据从绑定表达式传达到指令中。 Renderer让代码可以改变 DOM 元素的样式。 注意:正确的书写监听器,并且还要在指令被销毁的时候,必须卸掉监听器,不然会造成内存泄漏。 使用数据绑定向指令传递值,在定义这个属性的时候,我们调用了@Input()装饰器。

    31230

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 物联网开发平台

      物联网开发平台

      腾讯云物联网开发平台(IoT Explorer)为客户提供便捷的物联网开发工具与服务,助力客户更高效的完成设备接入,并为客户提供物联网应用开发及场景服务能力,帮助客户高效、低成本构建物联网应用……

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券