指令可以理解為沒有模板的元件,它需要乙個宿主元素
推薦使用方括號 指定selector,使它變成乙個屬性
html
ts
指令import from '@angular/core';
export inte***ce channel
@component()
export class horizontalgridcomponent implements oninit ,
] constructor()
ngoninit()
}
drid-item-image.directive.ts
grid-item-title.directive.tsimport from '@angular/core';
@directive()
export class griditemimagedirective
ngoninit(): void
}
grid-item.directive.tsimport from '@angular/core';
@directive()
export class griditemtitledirective
ngoninit(): void
}
指令沒有模板,指令要寄宿在乙個元素之上 - 宿主(host)import from '@angular/core';
@directive()
export class griditemdirective
ngoninit(): void
}
@hostbinding 繫結宿主的屬性或者樣式
@hostlistener 繫結宿主的事件
元件的樣式中也可使用:host這樣乙個偽類選擇器
:host
代表本身的樣式
@hostlistener("click",["$event.target"])
handleclick(ev)
Angular2 指令 路由指令
routeroutlet的作用是在模板中開闢出一片區域,用於顯示url所對應的元件,angular將模板中使用了 標籤的元件統稱為路由元件 router outlet main routerlink接收乙個連線引數陣列,angular將根據該陣列來生成urltree例項進行跳轉。routerlink...
Angular複習筆記5 指令
在angular中,指令是乙個重要的概念,它作用在特定的dom元素上,可以擴充套件這個元素的功能,為元素增加新的行為。本質上,元件可以被理解為一種帶有檢視的指令。元件繼承自指令,是指令的乙個子類,通常被用來構造ui控制項。指令的使用並不複雜,它與html元素屬性的使用方式相似。不同的是,html語法...
angular學習筆記(6) 指令
angular1學習筆記 6 指令 restrict 匹配模式 1.a 屬性 2.m 注釋 3.e 元素 4.c 樣式類 注釋留空兩邊 推薦使用元素和屬性的方式使用指令 當需要建立帶有自己的模板的指令時,使用元素名稱的方式建立指令 當需要為已有的html標籤增加功能時,使用屬性的方式建立指令 sco...