前言

本文主要给大家介绍了关于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 对象实例。

总结

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

# angular4  # 指令  # angular常用指令  # angularjs常用指令  # Web前端框架Angular4.0.0 正式版发布  # 浅谈angular4生命周期钩子  # Angular4学习笔记之准备和环境搭建项目  # Angular4 中内置指令的基本用法  # 详解Angular4 路由设置相关  # 深入理解Angular4中的依赖注入  # angular4中关于表单的校验示例  # Angular4开发解决跨域问题详解  # Angular4学习笔记之实现绑定和分包  # 浅谈angular4 ng-content 中隐藏的内容  # Angular4的输入属性与输出属性实例详解  # 的是  # 是一个  # 推荐使用  # 可以使用  # 可选  # 相关内容  # 让我们  # 多个  # 我有  # 不需要  # 如有  # 都能  # 注意到  # 给大家  # 就得  # 这篇文章  # 谢谢大家  # 来实现  # 类似于  # 但当 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： jQuery 常见小例汇总  JavaScript数据类型有哪些_如何准确判断一个变量的类型  Laravel如何实现用户密码重置功能？（完整流程代码）  香港服务器WordPress建站指南：SEO优化与高效部署策略  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  java获取注册ip实例  深圳网站制作培训,深圳哪些招聘网站比较好？  JavaScript如何操作视频_媒体API怎么控制播放  如何在阿里云购买域名并搭建网站？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何制作一个表白网站视频,关于勇敢表白的小标题？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  公司门户网站制作流程,华为官网怎么做？  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  重庆市网站制作公司,重庆招聘网站哪个好？  详解Huffman编码算法之Java实现  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  原生JS获取元素集合的子元素宽度实例  音响网站制作视频教程,隆霸音响官方网站？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Laravel怎么判断请求类型_Laravel Request isMethod用法  Laravel如何升级到最新版本？（升级指南和步骤）  西安专业网站制作公司有哪些,陕西省建行官方网站？  如何快速生成凡客建站的专业级图册？  Python函数文档自动校验_规范解析【教程】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  WordPress 子目录安装中正确处理脚本路径的完整指南  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  七夕网站制作视频,七夕大促活动怎么报名？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  如何用IIS7快速搭建并优化网站站点？  HTML 中动态设置元素 name 属性的正确语法详解  如何快速搭建FTP站点实现文件共享？  手机软键盘弹出时影响布局的解决方法  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  微信小程序 HTTPS报错整理常见问题及解决方案  高防服务器：AI智能防御DDoS攻击与数据安全保障  长沙企业网站制作哪家好,长沙水业集团官方网站？  如何快速搭建安全的FTP站点？