angular2.x指令

时间：2023-03-08 22:25:47


1.指令




　　*ngIf：　判断 isActive 为true时 <user-detail> 生效展示


　　<user-detail *ngIf="isActive"></user-detail> 


　　*ngFor：遍历显示


　　　　<div *ngFor="let user of users">{{user.fullName}}</div>


　　ngClass:class为true类名text-success生效


　　　　[ngClass]="{'text-success':true}"


　　ngStyle：　样式绑定


　　　　<div [ngStyle]="{'background-color':'green'}"></<div>
　　判断添加
　　　　<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>




　　ngModule：　双向绑定


　　<div>

  　　<h2>{{hero.name}} 信息!</h2>

  　　<label>name: </label>

  　　<input [(ngModel)]="hero.name" placeholder="name">

　　</div>




以下原文地址:http://victorsavkin.com/post/119943127151/angular-2-template-syntax


2. 属性和事件绑定


属性绑定


假设我们有一个组件来呈现的Todo，我们可以在我们的模板中使用这个组件，如下所示：




<todo-cmp [model]="myTodo"></todo-cmp>




这告诉Angular,只要myTodo发生变化,当有一个新的todo时，Angular会通过模型来自动更新todo组件


事件绑定


现在，让我们添加一个事件使组件更有趣。




<todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>




当事件complete触发时会告诉Angular调用 onCompletingTodo 方法


现在，让我们看看TodoCmp本身。




@Component({

  selector: 'todo-cmp',

  properties: ['model'],

  events: ['complete']

})

class TodoCmp {

  model;

  complete = new EventEmitter(); // TypeScript 支持初始化

  onCompletedButton() {

    this.complete.next(); // 触发事件

  }

}




这个组件声明数据绑定的名字为model,事件名为complete


Angular使用Rx事件风格来处理事件的接收，EventEmitter即实现了observable，又实现了observer接口(规范),因此，我们可以用它来触发事件，并且Angular也可以用它来监听事件。


正如你所看到的，属性和事件绑定的核心语法很简单。在核心语法之上，Angular提供了一些语法糖，使表达常用的编程模式更加容易。重要的是要了解，这仅仅是语法糖，而且它不会改变语义。


双向绑定


双向数据绑定在某些情况下是很方便的，最值得注意的是处理输入，正如我刚才提到的，属性绑定用于数据从父传递给子，事件绑定用于从子到父的数据传递。因此，我们可以使用两种方法来实现双向绑定。




<input [ng-model]="todo.text" (ng-model)="todo.text=$event"></input>




虽然这可以正常工作，但这太罗嗦。因为这是一个常见的模式，所以Angular提供语法糖简化这种写法。




<input [(ng-model)]="todo.text"></input>




要完成这个例子，让我们来实现Angular 2的ng-model




@Directive({

  selector: '[ng-model]',

  properties: ['ngModel'],

  events: ['ngModelChanged: ngModel'],

  host: {

    "[value]": 'ngModel',

    "(input)": "ngModelChanged.next($event.target.value)"

  }

})

class NgModelDirective {

  ngModel:any; // stored value

  ngModelChanged:EventEmitter; // an event emitter

}




这是一种比较幼稚的ngModel实现，但它说明了如何实现双向数据绑定行为：输入将在text发生更改时更新，并在输入更改时更新text字段。


请注意，于Angular 1相反，你只要看看模板就可以知道哪些绑定是“双向”，哪些是“单向”。


此外，因为只有一个方向，属性绑定，被Angular自动执行，双向的行为更可预测的。


它不会破坏任何Angular 2的语法：这只是一些语法糖，没有别的。


我想提一提，你不用去实现NgModel。Angular 2配备了一个表单处理模块，其包括NgModel的实现。


插值




<div>Hello {{name}}</div>




使用语法糖




<div [textContent]="interpolate(['Hello'], [name])"></div>




绑定直接量




<show-title title="Some Title"></show-title>




使用语法糖




<show-title [title]=" 'Some Title' "></show-title>




移除括号


你可以使用bind-,in-和bindon-在你的模板中代替所有的括号，虽然这几乎不能称为“语法糖”




<some-component [prop]="someExp" (event)="someEvent()" [(two-way-prop)]="someExp"></show-title>




于上面相同




<some-component bind-prop="someExp" on-event="someEvent()" bindon-two-way-prop="someExp"></show-title>




3.局部变量


有两个组件互相交互，这种情况并不少见，Angular 2在模板中支持定义的局部变量。




<video-player #player></video-player>

<button (click)="player.pause()">Pause</button>




#player表示当前video-player组件自身，而没有#player的组件则可以通过player访问video-player组件




<input #i>

{{i.value}}




语法糖




<video-player #player></video-player>




相当于




<video-player var-player></video-player>




模板和 *


Angular以特殊的方式对待template元素。它们用来创建视图，你可以动态操作DOM块，*语法是一种捷径，它可以使你不用写出全部的<template>元素，让我告诉你它是如何工作。


假设我们呈现Todo列表组件。




<todo-cmp *ng-for="#t of todos; #i=index" [model]="t" [index]="t"></todo-cmp>




去除语法糖后变为




<todo-cmp template="ng-for #item of items; #i=index" [model]="t" [index]="i"></todo-cmp>




再一次去除语法糖后变为




<template ng-for #item="$implicit" [ng-for-of]="items" #i="index">

  <todo-cmp [model]="t" [index]="t"></todo-cmp>

</template>




该ngFor指令在视图上会创建$implicit和$index变量并绑定到模板上，在模板元素上声明的所有变量只能在元素内提供,这就是为什么以下是不正确




<todo-cmp *ng-for="#t of todos"></todo-cmp>

{{t}} <!-- t cannot be referenced here -->




你需要重点理解的是，当你建立你自己的指令来处理视图时，你的 * syntax 语法能扩展成什么。例如，如果你看ngfor，你会发现它有ngforof属性，但是没有of属性。


为什么不对ng-for自定义语法，象angular 1一样呢？这有几个很好的理由。有自定义语法意味着你必须知道这个微语言如何操作。这也意味着在工具（例如，IDE和LInter）中不能理解你的模板而且并不能提供自动完成和重构。


web组件和原生元素


在这篇博客我谈到了一切的内容 - 局部变量，属性和事件绑定 - 对于web组件和标准的html元素来讲使用方式是完全相同


我可以用Web组件更换TodoCmp，仍然使用相同方式与它进行交互。




<todo-cmp [model]="todo" (completed)="onCompletingTodo(todo)"></todo-cmp>




我可以用Web组件更换视频播放器，仍然使用相同方式与它进行交互。




<video-player #player></video-player>

<button (click)="player.pause()">Pause</button>




这将变得极为重要，因为更多的组件库可用。当运行在非Angular组件上也很重要(这是Angular 2目标之一)，否者你不得不把每一个原生组件包装成一个Angular 2组件，那真的很糟糕。Angular 2你可以直接使用任何本地组件，使用相同的语法，只有当你例如想使用依赖注入时，可将它包装为Angular组件


设计目标


我希望你能明白在Angular 2里模板语法是怎么运作的.现在，我想来讨论一下为什么它用这种方式运作？它这么设计的目的是什么？


我们的主要设计目标是使模板更加清晰，开发者在不知如果使用指令情况也能够理解和重构模板，以及指令是如何工作的。




<component [property1]="name" property2="name"></component>




不管组件元素是什么，property1是指向一个name变量的属性 property2属性只表示一个name字符串，你也需要知道，组件的property2属性无法更新，property1属性绑定更新是从父到子。




<component [(property1)]="name"></component>




在这里，我们可以看到，name可以被更新，因为我们使用[()]语法


同样，你可以告诉在模板中定义了哪些变量，来看这里的*nf-for




<todo-cmp *ng-for="#t of todos"></todo-cmp>




其次，我们希望有丰富的开发工具，在下面的列子中，工具可以静态地推断出第一个index是组件上的字段，而第2个index是ng-for输出的局部变量




{{index}}

<div *ng-for="#item of items; var index=index">

  {{index}

</div>


相关文章