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 相关文章推荐
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
php 操作调试的方法
2012/07/12 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP进程同步代码实例
2015/02/12 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python列表解析操作实例总结
2020/02/26 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
培训班主持词
2014/03/28 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
党支部对照检查材料
2014/08/25 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP