python网站开发快吗,外包公司是做什么的,wordpress ping服务列表,网络营销渠道有哪三类[Angular 基础] - 指令(directives)
这里假设已经知道如何创建 Angular 组件以及数据绑定#xff0c;不然可以参考前两篇笔记#xff1a; [Angular 基础] - Angular 渲染过程 组件的创建 [Angular 基础] - 数据绑定(databinding)
就像中文翻译一样#xff0c;dire…[Angular 基础] - 指令(directives)
这里假设已经知道如何创建 Angular 组件以及数据绑定不然可以参考前两篇笔记 [Angular 基础] - Angular 渲染过程 组件的创建 [Angular 基础] - 数据绑定(databinding)
就像中文翻译一样directives 就是指令它就是一系列 DOM 中存在的指令
component directive
Component 这个 declaration 就是一个最基础的指令当运行
import { Component } from angular/core;Component({selector: app-my-component,template: pHello, world!/p,
})
export class MyComponent {}这段代码的时候其实就已经是在运行一个指令这个指令做了下面几件事情
Component 表明下面声明的类是一个组件selector 定义一个元素该元素会接受当前组件内的 HTML Templatetemplate 定义一个 HTML Template将会展现在 app-my-component 这个 HTML 元素中
这就是当前需要遵从的指令我个人理解是通知 DOM 如何渲染特定的 HTML 元素
以此类推NgModule, Directive 等也是对应的 component directive
structural directives
structural directives 的指令是通知 DOM 增加或删除特定的 HTML 元素。目前主流的内置 structural directives 有 3 个*ngIf, *ngFor 和 *ngSwitch当然这不代表 Angular 之提供了这三个 structural directives
除此之外开发者自己也可以创建相应的 structural directives
*ngIf
语法为 *ngIfexpression并且这个表达式(expression) 需要返回一个 boolean。依旧使用之前的案例这里假设点击 add server 的按钮会实现对应功能并且需要向用户显示新的组件已经生成
对应的 View 层修改如下
!-- 其余显示添加 server 的 input 和 button 这里不重复了 --
p *ngIfserverCreatedSever was created, server name is {{ serverName }}/p对应的 VM 层修改如下
// 新增加的变量只有在用户点击创建 server 的 btn 时才需要显示信息serverCreated false;onCreateServer() {this.serverCreationStatus Server was created!;this.serverCreated true;}效果如下 可以看到只有当 *ngif 里的条件为 true 时该 DOM 才会渲染
有了 if 也会有 else 条件这时候 V 层的代码可以这么修改
p *ngIfserverCreated; else noServerSever was created, server name is {{ serverName }}
/p
ng-template #noServerpNo server was created!/p
/ng-template这里使用了一个特殊的 HTML 元素——ng-template它主要的用途是为了搭配 structural directives 去使用的这里 #noServer 是对 ng-template 这一元素的引用变量名
*ngIf v17 的更新
目前有一个新的语法可以重置 ngIf它的语法就是 for使用方式如下
if (serverCreated) {
pSever was created, server name is {{ serverName }}/p
} else {
pNo server was created!/p
}其展示的效果是一样的else if 的语法则为 else if
这个语法是 v17 最新推出的版本暂时还不是 production-ready所以只在这里提一下不会深入研究
ngFor
这是一个可以循环渲染 HTML 元素的方式用法如下 修改 VM 层 这里会新增一个 servers 的数组并且在 onCreateServer 中将新添的 serverName 推到数组中去 servers [Test Server, Test Server2];onCreateServer() {this.serverCreationStatus Server was created!;this.servers.push(this.serverName);this.serverCreated true;
}修改 V 层 这里就使用 *ngFor 去渲染整个数组 app-server *ngForlet server of servers/app-server最终效果如下 ⚠️这里还没有涉及到组件之间数据的传输所以 serverName 不会动态渲染
相比较 ngIfngFor 的语法更复杂一些它的完整语法如下
div*ngForlet item of servers;trackBy: trackByFn;index as i;first as isFirst;last as isLast;even as isEven;odd as isOdd
{{ i }}: {{ item }}span *ngIfisFirst(first)/spanspan *ngIfisLast(last)/spanspan *ngIfisEven(even)/spanspan *ngIfisOdd(odd)/span
/div其中 trackByFn 写在了 VM 层 trackByFn(index: number, item: string) {return item;}最终展现的效果如下 这里的 trackBy: trackByFn; 是 Angular 提出的一个优化方案当它存在的时候Angular 会检查当前返回值是否变更如果不变更的话将不会重新渲染当前的 DOM 结点
至于 first, last 这四个是 Angular 提供的值以便可以轻松检查这些边界条件
*ngFor v17 的更新
这个语法如下
for (item of items: track item.id) {
li{{ item.title }}/li
}这个语法是 v17 最新推出的版本暂时还不是 production-ready所以只在这里提一下不会深入研究
ngSwitch
它的语法则类似于 switch修改的代码如下
div*ngForlet item of servers;trackBy: trackByFn;index as i;first as isFirst;last as isLast;even as isEven;odd as isOdd
{{ i }}: {{ item }}span *ngIfisFirst(first)/spanspan *ngIfisLast(last)/spanspan *ngIfisEven(even)/spanspan *ngIfisOdd(odd)/spandiv [ngSwitch]itemp *ngSwitchCaseredYou picked red server!/pp *ngSwitchCaseblueYou picked blue server!/pp *ngSwitchCasegreenYou picked green server!/pp *ngSwitchDefaultPick a server name/p/div
/div效果如下 *ngSwitch v17 的更新
这个语法如下
switch (expression) { case value1:
pvalue1/p
case value2:
pvalue2/p
}这个语法是 v17 最新推出的版本暂时还不是 production-ready所以只在这里提一下不会深入研究
attribute directives
structural directives 控制的是 DOM 元素的增删(是否渲染)那么 attribute directives 控制的则是渲染 DOM 中的属性
这里也会列举主流用的 3 个同样这也不代表 Angular 仅仅提供了这 3 个 structural directives而且开发者同样也可以创建自己的 structural directives
ngModel
这个在之前的笔记里已经提过了NgModel 主要提供的是双向绑定的功能
ngStyle
ngStyle 就是比较简单的控制 CSS 的地方用法如下
p[ngStyle]{background-color: serverStatus offline ? red : green}
{{ Server }} with ID {{ serverId }} is {{ getServerStatus() }}
/p效果如下 ⚠️以上代码修改在 server.component.html 中
❗如果无法正确渲染请查看 servers.component.html 中的 ngFor 是不是返回 app-server/app-server
⚡ngStyle 是 attribute directives[ngStyle] 则是使用了 property binding
️backgound-color 还有另一个写法是用驼峰命名法 backgroundColor而 : 后面的也只是需要一个表达式这里用了三元式也可以单独创建一个方法
ngClass
这个指令则是动态更新类名这里实现代码如下
p[ngStyle]{background-color: serverStatus offline ? red : green}[ngClass]{online: serverStatus online,offline: serverStatus offline}
{{ Server }} with ID {{ serverId }} is {{ getServerStatus() }}
/p至于 VM 层也需要添加对应的 CSS
Component({selector: app-server,templateUrl: ./server.component.html,styles: [.online {color: cyan;}.offline {color: lightgray;},],
})
export class ServerComponent {}最终效果如下
