Angular4 中常用的指令入门总结


Posted in Javascript onJune 12, 2017

前言

本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

NgIf

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

有时候需要根据不同的条件,渲染不同的元素,此时我们可以使用多个 ngIf 来实现。

<div class="container">
 <div *ngIf="myVar == 'A'">Var is A</div>
 <div *ngIf="myVar == 'B'">Var is B</div>
 <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

如果 myVar 的可选值多了一个 'C',就得相应增加判断逻辑:

<div class="container">
 <div *ngIf="myVar == 'A'">Var is A</div>
 <div *ngIf="myVar == 'B'">Var is B</div>
 <div *ngIf="myVar == 'C'">Var is C</div>
 <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">
 Var is something else
 </div>
</div>

可以发现 Var is something else 的判断逻辑,会随着 myVar 可选值的新增,变得越来越复杂。遇到这种情景,我们可以使用 ngSwitch 指令。

<div class="container" [ngSwitch]="myVar">
 <div *ngSwitchCase="'A'">Var is A</div>
 <div *ngSwitchCase="'B'">Var is B</div>
 <div *ngSwitchCase="'C'">Var is C</div>
 <div *ngSwitchDefault>Var is something else</div>
</div>

NgStyle

NgStyle 让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。

1、设置元素的背景颜色

<div [style.background-color="'yellow'"]>
 Use fixed yellow background
</div>

2、设置元素的字体大小

<!-- 支持单位: px | em | %-->
<div>
 <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
 red text
 </span>
</div>

NgStyle 支持通过键值对的形式设置 DOM 元素的样式:

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
 Uses fixed white text on blue background
</div>

注意到 background-color 需要使用单引号,而 color 不需要。这其中的原因是,ng-style 要求的参数是一个 Javascript 对象,color 是一个有效的 key,而 background-color 不是一个有效的 key ,所以需要添加 ''。

NgClass

NgClass 接收一个对象字面量,对象的 key 是 CSS class 的名称,value 的值是 truthy/falsy 的值,表示是否应用该样式。

1、CSS Class

.bordered {
 border: 1px dashed black; background-color: #eee;
}

2、HTML

<!-- Use boolean value -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

<!-- Use component instance property -->
<div [ngClass]="{bordered: isBordered}">
 Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<!-- Class names contains dashes -->
<div[ngClass]="{'bordered-box': false}">
 Class names contains dashes must use single quote
</div>

<!-- Use a list of class names -->
<div class="base" [ngClass]="['blue', 'round']"> 
 This will always have a blue background and round corners
</div>

NgFor

NgFor 指令用来根据集合(数组) ,创建 DOM 元素,类似于 ng1 中 ng-repeat 指令

<div class="ui list" *ngFor="let c of cities; let num = index"> 
 <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

使用 trackBy 提高列表的性能

@Component({
 selector: 'my-app',
 template: `
 <ul>
 <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
 </ul>
 <button (click)="getItems()">Refresh items</button>
 `,
})
export class App {

 constructor() {
 this.collection = [{id: 1}, {id: 2}, {id: 3}];
 }

 getItems() {
 this.collection = this.getItemsFromServer();
 }

 getItemsFromServer() {
 return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
 }

 trackByFn(index, item) {
 return index; // or item.id
 }
}

NgNonBindable

ngNonBindable 指令用于告诉 Angular 编译器,无需编译页面中某个特定的HTML代码片段。

<div class='ngNonBindableDemo'>
 <span class="bordered">{{ content }}</span>
 <span class="pre" ngNonBindable>
 ← This is what {{ content }} rendered
 </span>
</div>

Angular 4.x 新特性

If...Else Template Conditions

语法

<element *ngIf="[condition expression]; else [else template]"></element>

使用示例

<ng-template #hidden>
 <p>You are not allowed to see our secret</p>
</ng-template>
<p *ngIf="shown; else hidden">
 Our secret is being happy
</p>

<template> —> <ng-template>

使用示例

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Component({
 selector: 'exe-app',
 template: `
 <ng-template #fetching>
 <p>Fetching...</p>
 </ng-template>
 <p *ngIf="auth | async; else fetching; let user">
 {{user.username }}
 </p>
 `,
})
export class AppComponent implements OnInit {
 auth: Observable<{}>;

 ngOnInit() {
 this.auth = Observable
 .of({ username: 'semlinker', password: 'segmentfault' })
 .delay(new Date(Date.now() + 2000));
 }
}

我有话说

使用 [hidden] 属性控制元素可见性存在的问题

<div [hidden]="!showGreeting">
 Hello, there!
</div>

上面的代码在通常情况下,都能正常工作。但当在对应的 DOM 元素上设置 display: flex 属性时,尽管[hidden] 对应的表达式为 true,但元素却能正常显示。对于这种特殊情况,则推荐使用 *ngIf。

直接使用 DOM API 获取页面上的元素存在的问题

@Component({
 selector: 'my-comp',
 template: `
 <input type="text" />
 <div> Some other content </div>
 `
})
export class MyComp {
 constructor(el: ElementRef) {
 el.nativeElement.querySelector('input').focus();
 }
}

以上的代码直接通过 querySelector() 获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量,具体示例如下:

@Component({
 selector: 'my-comp',
 template: `
 <input #myInput type="text" />
 <div> Some other content </div>
 `
})
export class MyComp implements AfterViewInit {
 @ViewChild('myInput') input: ElementRef;

 constructor(private renderer: Renderer) {}

 ngAfterViewInit() {
 this.renderer.invokeElementMethod(
 this.input.nativeElement, 'focus');
 }
}

另外值得注意的是,@ViewChild() 属性装饰器,还支持设置返回对象的类型,具体使用方式如下:

@ViewChild('myInput') myInput1: ElementRef;
@ViewChild('myInput', {read: ViewContainerRef}) myInput2: ViewContainerRef;

若未设置 read 属性,则默认返回的是 ElementRef 对象实例。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
vue-loader教程介绍
Jun 14 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
layui动态表头的实现代码
Aug 22 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 #Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 #Javascript
JavaScript初学者必看“new”
Jun 12 #Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 #Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 #Javascript
微信小程序 实现点击添加移除class
Jun 12 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP中函数内引用全局变量的方法
2008/10/20 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python 的描述符 descriptor详解
2016/02/27 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python中six模块基础用法
2019/12/08 Python
python数据预处理方式 :数据降维
2020/02/24 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
使用K.function()调试keras操作
2020/06/17 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
酒店门卫岗位职责
2013/12/29 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python使用永中文档转换服务
2022/05/06 Python