Angular頁面指令

2021-10-01 07:30:53 字數 1136 閱讀 2628

分為元件帶模板的指令,結構性指令改變宿主文件結構(*ngif *ngswitch *ngfor),屬性性指令改變宿主行為 (ngmodel ngstyle ngclass)

[innerhtml] : 將value作為html標籤來解析

[textcontent]: 將value作為文字解析

*ngif

*ngif: 如果vlaue為true, 當前標籤會輸出在頁面中

*1. 當條件為真的時候需要顯示的內容

*2. 當條件為真的時候需要顯示的內容

當條件為假的時候需要顯示的內容

*3.

當條件為真的時候需要顯示的內容

當條件為假的時候需要顯示的內容

*ngswitch

*ngfor : 遍歷

* 遍歷陣列 : *ngfor="let item of list;let i = index;"> let first = first; let last = last;指定第乙個和最好後乙個(布林)。 let odd = odd;let even = even;指定奇偶(陣列的索引)。 trackby:trackelement;提高效能類似vue中的key

(click)=」getdata($event)」: 繫結事件監聽

* 監視具體的按鍵: (keyup.keycode) (keyup.enter)

* 停止事件的冒泡和阻止事件預設行為: $event.stoppropagation(); $event.preventdefault();

[自定義] : 強制繫結解析表示式

* 很多屬性值是不支援表示式的, 就可以使用[***]

[(ngmodel)]="inputvalue": 注意引入:formsmodule import from '@angular/forms';

[class.classname]: 單樣式條件繫結

[ngclass]: [ngclass]=""

[ngstyle]: [ngstyle]=""

自定義指令

import from '@angular/code'

@directive()

export class ***xxdirective

指令所在的元素叫宿主

angular基礎 指令

指令 directive 可以理解為沒有模版的元件,它需要寄宿在乙個元素上 宿主 host 1.hostbinding 繫結宿主的屬性或樣式 import from angular core directive export class griditemdirective 2.hostlistene...

angular指令總結

ng list ng non bindable ng switch ng readonly ng include ng template angular中有一些不常用,但卻非常有用的指令,如果在開發過程中可以直接使用這些指令,會大大地加快我們的開發效率。ng class 指令用於給 html 元素動...

Angular 指令詳解

1.angular安裝 1.1 因為angular一般是用npm安裝,所以需要先裝npm.npm的安裝一般用nodejs.所以把nodejs裝好,npm也就裝好了。1.2 配置npm的映象,使用國內的映象。npm config set registry 檢查是否設定成功 npm config lis...