【2019-11-20】组件简介

组件控制屏幕上被称为视图的一片区域

组件的元数据

 

 

 selector --是一个CSS选择器，它会告诉Angular,一旦在模板HTML中找到了这个选择器对应的标签，就建立并插入该组件的一个实例。

templateUrl -- 该组件的HTML模板文件相对于这个组件文件的地址。另外，你还能够用template属性的值来提供内联的HTML模板。这个模板定义Lee该组件的宿主视图

providers -- 当前组件所需的服务提供商的一个数组

模板与视图

你要经过组件的配套模板来定义其视图。模板就是一种HTML，它会告诉Angular如何渲染该组件

模板语法

数据绑定来协调应用和DOM中的数据

管道在显示出来以前对其进行转换

指令把程序逻辑应用到要显示的内容上

一、数据绑定：单向和双向绑定

①组件到DOM   {{hero.name}}

②组件到组件 <app-hero-detail [hero]="selectedHero"></app-hero-detail> 

将父组件的selectedHero传给子组件的hero属性

③DOM到组件   <li (click)="selectHero(hero)"></li>

④双向绑定  <input [(ngModel)]="hero.name">

显示把属性值从组件传到DOM，而后用户修改后，将DOM中的新值经过事件绑定传到组件

二、管道

 

 

 

 

today is Nov 20, 2019

 

 

 

 

 today is Wednesday, November 20, 2019

 

 

 today is 10:50 AM

三、指令

Angular的模板是动态的。当Angular渲染它们的时候，会根据指令给出的只是对DOM进行转换。指令就是一个带@Directive()装饰器的类

组件从技术角度也是一种指令

除组件外，还有两种指令：结构型指令和属性型指令

指令的元数据把它装饰的指令类和一个selector关联起来，selector用来把指令插入到HTML中。在模板中，指令一般做为属性出如今元素标签上，可能仅仅做为名字出现，也可能做为赋值目标或者绑定目标出现

①结构型指令

经过添加、移除或替换DOM元素来修改布局

 

 

 *ngFor -- 是一个迭代器，他要求Angular为heroes列表中的每一个英雄渲染一个<li>

*ngIf -- 是个条件语句，只有当选中的英雄存在时，他才会包含HeroDetail组件

②属性型指令

会修改现有元素的外观或行为。在模板中，它们看起来就像普通的HTML属性同样，所以得名“属性型指令”

 

 

 ngModule指令就是一个属性型指令，它实现了双向数据绑定。

ngModule修改现有元素，通常是input的行为；设置其显示属性值，并响应change事件

Angular还有不少预约义指令，既不修改布局结构(eg : ngSwitch),也不修改DOM元素和组件的样子(ngStyle 和ngClass)