Angular入门基础(第二篇) 内置常用指令的使用

用户3821865500480
134 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天。点击查看活动详情

绑定数据和内置常用指令

  • 星号（*）前缀
  • 星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说，Angular 把 *ngIf 属性 翻译成一个 <ng-template> 元素, 并用它来包裹宿主元素
  • Angular 不允许*ngFor 和 *ngIf 放在同一个宿主元素上

数据文本绑定

{{}}

<h1>
{{title}}
</h1>

绑定 html

this.h = "<h2>这是一个h2 用[innerHTML]来解析</h2>";

<div [innerHTML]="h"></div>

绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

ngIf

【ngIf】表达式结果为真，显示元素；表达式结果为假，移除元素。

<div *ngIf="a > b"></div>

ngSwitch

【ngSwitch】对表达式进行一次求值，然后根据其结果来决定如何显示指令内的嵌套元素。

*　一旦表达式有了结果，就可以

  • 使用ngSwitchCase指令描述已知结果；
  • 使用ngSwitchDefault指令处理所有其他未知情况。
  • 当你需要根据一个条件来渲染不同元素的时候，如下代码使用了ngIf来实现：
<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>
  • 如你所见，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>
  • ngSwitchDefault元素是可选的。如果我们不用它，那么当 myVar 没有匹配到任何期望的值时就不会渲染任何东西。
  • 你也可以为不同的元素声明同样的*ngSwitchCase值：
  • 这样，当choice的值为 2 时，第二个和第五个<li></li>都会被渲染。
<div class="ui raised segment">
  <ul [ngSwitch]="choice">
    <li *ngSwitchCase="1">First choice</li>
    <li *ngSwitchCase="2">Second choice</li>
    <li *ngSwitchCase="3">Third choice</li>
    <li *ngSwitchCase="4">Fourth choice</li>
    <li *ngSwitchCase="2">Second choice, again</li>
    <li *ngSwitchDefault>Default choice</li>
  </ul>
</div>

ngStyle

【ngStyle】根据表达式的结果给特定的 DOM 元素设定 CSS 属性

  • 该指令最简单的用法就是[style.<cssproperty>]="value"的形式：
  • ngStyle指令把CSS的background-color属性设置为字符串字面量 yellow。
<div [style.background-color]="'yellow'">
  Uses fixed yellow background
</div>
  • 设置固定值的方式就是使用ngStyle属性，使用键值对来设置每个属性：
<div [ngStyle]="{color: 'white','background-color':'blue'}">
  Uses fixed white text on blue background
</div>

ngClass

【ngClass】动态设置和改变一个给定DOM元素的CSS类

  • 传入一个对象字面量
  • 假设我们有一个叫作bordered的CSS类，用来给元素添加一个黑色虚线边框：
  • 使用ngClass指令来动态分配CSS类：
.bordered {
  background-color: #eee;
  border: 1px dashed black;
}

<div [ngClass]="{bordered: isBordered}">
  Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>
  • 或者在组件中定义该对象，并且直接使用它：
export class NgClassSampleApp {
  isBordered: boolean;
  classesObj: Object;
  classList: string[];
}

<div [ngClass]="classesObj">
  Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>
  • 传入一个数组型字面量
<div class="base" [ngClass]="['blue', 'round']">
  This will always have a blue background and round corners
</div>
  • 或者在组件中声明一个数组对象，并把它传进来：
this.classList = ['blue', 'round'];

<div class="base" [ngClass]="classList">
  This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue and {{
  classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>

ngFor

【ngFor】重复一个给定的DOM元素（或一组DOM元素），每次重复都会从数组中取一个不同的值

  • 它的语法是 *ngFor="let item of items"
  • let item语法指定一个用来接收items数组中每个元素的（模板）变量。
  • items是来自组件控制器的一组项的集合。
  • 假设在组件控制器中声明了一个城市的数组：
this.cities = ['Miami', 'Sao Paulo', 'New York'];

<div *ngFor="let c of cities">
  <div>{{ c }}</div>
</div>
  • 获取索引
  • 我们可以在ngFor指令的值中插入语法let idx = index并用分号分隔开，这样就可以获取索引了。
  • 例如，对第一个例子进行修改，添加代码段let num = index。
<div *ngFor="let c of cities; let num = index">
  <div>{{ num+1 }} - {{ c }}</div>
</div>
  • template 循环数据
<ul>
  <li template="ngFor let item of list">
    {{item}}
  </li>
</ul>

ngNonBindable

【ngNonBindable】当我们想告诉Angular不要编译或者绑定页面中的某个特殊部分时，要使用ngNodBindable指令

  • 假设我们想要用一个div来渲染变量content的内容，紧接着输出文本 this is what {{ content }} rendered来指向变量实际的值。通常情况下，{{content}}会被绑定到content变量的值，因为使用了{{ }}模板语法，为了能够渲染出纯文本，我们使用ngNonBindable指令：
  • 有了ngNonBindable属性，Angular不会编译第二个span里的内容，而是原封不动地将其显示出来：
<div>
  <span>{{ content }}</span>
  <span ngNonBindable>
    &larr; This is what {{ content }} rendered
  </span>
</div>

NgModle

【NgModle】 双向绑定到html表单元素

  • 虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。
  • 它属于一个可选模块 FormsModule，必须自行添加此模块才能使用该指令。
<div>
  <input type="text" placeholder="name" [(ngModel)]="hero.name" />
</div>

(click)=”getData()”

<button (click)="getData($event)">
  点击按钮触发事件
</button>
<button (click)="setData($event)">
  点击按钮设置数
</button>

/*自定义方法获取数据*/
getData(){
//获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}

ng-template

  • 动态插槽 ngTemplteOutlet 使用 ng-container 跟 ngTemplateOutlet 可以在组件的任何地方动态插入你想要的模板
<ng-template #loading>
  <div>Loading...</div>
</ng-template>

<ng-template #dynamicTpl>
  <div class="deep-red">
    动态插槽ngTemplteOutlet
    使用ng-container跟ngTemplateOutlet可以在组件的任何地方动态插入你想要的模板
  </div>
</ng-template>

<div class="lessons-list" *ngIf="lessons; else loading"></div>
<ng-template [ngIf]="lessons" [ngIfElse]="loading">
  <div class="hero-list">...</div>
</ng-template>
<ng-container *ngTemplateOutlet="dynamicTpl"></ng-container>

ng-container

  • ng-container 是逻辑容器标签，可以用作组节点，不会被渲染成 DOM,但会被解析为 HTML 的 Comment 相当于一个容器
  • 所以在你想用 _ngIF 或者 _ngFor 的时候，不想用带语义的标签，可以用 ng-container。
<div>
  <ng-container *ngIf="true">
    <h2>Title</h2>
    <div>Content</div>
  </ng-container>
</div>

<!-- 渲染后 -->
<div>
  <h2>Title</h2>
  <div>Content</div>
</div>

ng-content

ng-content：父组件调用子组件时，将父组件内容投射到子组件指定位置（子组件中 ng-content 所在位置）

  • 子组件
<ng-content></ng-content>
<ng-content select="header"></ng-content>
<ng-content select="#demo"></ng-content>
<ng-content select="[name=demo]"></ng-content>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styles: [],
})
export class DemoComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}
  • 父组件
<app-demo>
  <p>no select属性</p>
  <header>header - parent component content !!! -</header>
  <div id="demo">id selector - parent component content !!! -</div>
  <div name="demo">name - parent component content !!! -</div>
</app-demo>
avatar
文章
阅读
粉丝