菜单

Angular4 中常用的吩咐入门计算

2019年6月15日 - Ajax
<!-- 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>

运用示例

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));
  }
}

你大概感兴趣的篇章:

NgStyle

NgStyle 让我们得以低价得经过 Angular 表明式,设置 DOM 成分的 CSS 属性。

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

<!-- 支持单位: px | em | %-->
<div>

      red text

</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 ,所以要求加多 ''

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

Angular 4.x 新特性

采纳示例

语法

<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>

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
  }
}

动用 trackBy 提升列表的性质

本身有话说

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

NgClass

NgClass 接收贰个指标字面量,对象的 key 是 CSS class 的名称,value
的值是 truthy/falsy 的值,表示是不是使用该样式。

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

<!-- 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>

前言

If…Else Template Conditions

@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
 }
}

一贯利用 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 对象实例。

<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 -->

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 -->
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));
 }
}

使用示例

<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>

2、设置成分的字体大小

<template> —> <ng-template>

<template> —> <ng-template>

NgNonBindable

ngNonBindable 指令用于告诉 Angular
编写翻译器,没有要求编写翻译页面中有个别特定的HTML代码片段。

<div class='ngNonBindableDemo'>
    {{ content }}

      ← This is what {{ content }} rendered

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

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>
<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>

使用 [hidden] 属性调节成分可知性存在的标题

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

地点的代码在常常情状下,都能平常办事。但当在对应的 DOM 成分上设置
display: flex 属性时,尽管[hidden] 对应的表明式为
true,但成分却能平常展现。对于这种特有景况,则援引应用 *ngIf

@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');
 }
}

使用 [hidden] 属性调整成分可知性存在的标题

NgFor

NgClass 接收二个对象字面量,对象的 key 是 CSS class 的称谓,value 的值是
truthy/falsy 的值,表示是或不是选拔该样式。

<!-- 支持单位: px | em | %-->
<div>

 red text

</div>

总结

上述的代码间接通过
querySelector()收获页面中的元素,平时不推荐使用这种措施。更加好的方案是利用
@ViewChild 和模板变量,具体示比方下:

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

临时候须要依赖差别的条件,渲染不一样的成分,此时大家能够动用多少个 ngIf
来实现。

1、设置成分的背景颜色

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

NgNonBindable

能够开掘 Var is something else的判别逻辑,会趁着 myVar
可选值的新添,变得更为复杂。境遇这种气象,大家得以选择 ngSwitch 指令。

若未安装 read 属性,则暗中同意再次来到的是 ElementRef 对象实例。

NgFor 指令用来依照集结(数组) ,创立 DOM 成分,类似于 ng1 中 ng-repeat
指令

上述正是那篇小说的全体内容了,希望本文的内容对大家的求学大概专门的学问能带来一定的协理,如有疑问大家能够留言调换,多谢我们对台本之家的补助。

NgStyle 援助通过键值对的样式设置 DOM 成分的样式:

NgSwitch

本文首要给我们介绍了有关Angular4
常用命令的相关内容,分享出来供大家参谋学习,下边来一齐看看详细的牵线:

自家有话说

<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>

瞩目到 background-color 必要运用单引号,而 color
无需。那个中的缘故是,ng-style 须要的参数是八个 Javascript 对象,color
是四个实用的 key,而 background-color 不是三个实用的 key ,所以要求增多”。

NgClass

语法

<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>
<div class='ngNonBindableDemo'>
 {{ content }}

 ← This is what {{ content }} rendered

</div>

2、HTML

NgIf

其余值得注意的是,@ViewChild()
属性装饰器,还支持设置重返对象的类型,具体选择办法如下:

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

If…Else Template Conditions

NgStyle

假如 myVar 的可选值多了多少个 ‘C’,就得相应增加推断逻辑:

地方的代码在一般情形下,都能平时干活。但当在相应的 DOM
元素上设置display: flex属性时,尽管[hidden] 对应的表明式为
true,但元素却能正常展现。对于这种差异平时情状,则援引应用 *ngIf。

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

NgStyle 让我们可以实惠得经过 Angular 表明式,设置 DOM 成分的 CSS 属性。

1、CSS Class

ngNonBindable 指令用于告诉 Angular
编写翻译器,没有要求编写翻译页面中有个别特定的HTML代码片段。

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

Angular 4.x 新特性

行使示例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图