Angular 屬性型指令 directive

2021-08-10 11:31:07 字數 991 閱讀 7201

1.使用命令建立指令    ng  g  d  yourdirectivename 2.

yourdirectivename.directive.ts**:

import  from '@angular/core';

@directive()

export class highlightdirective

@input() defualtcolor:string;

}private highlight(color:string)

@hostlistener('mouseenter') onmouseenter

3. 使用指定的html:a.

以上的兩種寫法等效,能夠把 red 傳入指令的defaultcolor變數 中   b.

以上兩種寫法等效,能夠把red傳入指令的color變數中

c.錯誤寫法

第一種寫法並不會把red傳入color中,因為 @input( name1 ) color:string;  這裡的變數name1 重新定義了 color的介面形式,即變數color給外部的介面是name1,這種寫法不會報錯,因為這個是attribute的寫法

第二種寫法會直接報錯:can't bind color since it isn't a known property...  

你記著設定@ngmoduledeclarations陣列了嗎?它很容易被忘掉。

開啟瀏覽器除錯工具的控制台,會看到像這樣的錯誤資訊:

angular 檢測到你正在嘗試繫結到

某些東西

,但它不認識。所以它在declarations元資料陣列中查詢。 把highlightdirective列在元資料的這個陣列中,angular 就會檢查對應的匯入語句,從而找到highlight.directive.ts,並了解

的功能。

python常用指令dir

python裡面的一切皆物件 每個物件都有不同的函式和常量。每個函式和常量都成為乙個屬性。那些函式被稱為方法。如果乙個函式是乙個模組的屬性,則這個屬性被稱之為函式 不是模組方法 dir 的作用就是將這個物件中的所有屬性顯示出來,這些屬性以列表的方式儲存。通過import sys,列印sys.modu...

Angular頁面指令

分為元件帶模板的指令,結構性指令改變宿主文件結構 ngif ngswitch ngfor 屬性性指令改變宿主行為 ngmodel ngstyle ngclass innerhtml 將value作為html標籤來解析 textcontent 將value作為文字解析 ngif ngif 如果vlau...

angular基礎 指令

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