Angular 7 學習資料 （2）元件

元件控制螢幕上被稱為檢視的一小片區域。當使用者在應用中穿行時，angular 就會建立、更新、銷毀一些元件。 你的應用可以通過一些可選的生命週期鉤子（比如ngoninit()）來在每個特定的時機採取行動。

@component裝飾器會指出緊隨其後的那個類是個元件類，並為其指定元資料。元件的元資料告訴 angular 到**獲取它需要的主要構造塊，以建立和展示這個元件及其檢視。

@component()

export
class
herolistcomponent
implements
oninit
, onchanges, ondestroy

繫結的型別可以根據資料流的方向分成三類：從資料來源到檢視、從檢視到資料來源以及雙向的從檢視到資料來源再到檢視。

>
}span
>
>
}span
>
title
="}"
>
span
>
[title]
="title"
>
span
>
bind-title
="title"
>
span
>
(click)
="onclick($event)"
>
button
>
on-click
="onclick($event)"
>
button
>
[(value)]
="value"
>
bindon-value
="value"
>

// 父元件

import
from
'@angular/core'
@component()
export
class
parentcomponent
implements
oninit
ngoninit()
// 接受子元件的資料
childrenvaluefn
(event: string)
}// 子元件
import
from
'@angular/core'
@component()
export
class
childrencomponent
implements
oninit
ngoninit()
inputchange
(event)
}// 父元件使用本地變數
import
from
'@angular/core'
@component(}
`,styleurls:
['./parent.component.less']}
)export
class
childrencomponent
implements
oninit
// 父元件呼叫 @viewchild()
import
from
'@angular/core'
import
from
'./childern/children.component'
@component()
export
class
parentcomponent
implements
afterviewinit
ngafterviewinit()
}

// 指令

import
from
'@angular/core'
;@directive()
export
class
getview
}// 動態載入元件
@component()
export
class
dynamiccomponent
implements
oninit
ngoninit()
loadcomponent()
}}// 其他使用
export
class}``

Angular 7 學習資料 （1）

angular 是乙個用 html 和 typescript 構建客戶端應用的平台與框架。angular 本身就是用 typescript 寫成的。它將核心功能和可選功能作為一組 typescript 庫進行實現，你可以把它們匯入你的應用中。angular 的基本構造塊是 ngmodule，它為元件...

Angular 2 元件之間如何通訊

import from angular2 core component class child component i number 0 constructor 1000 import from angular2 core component class child 1000 component i...

Angular 8 元件間資料共享

父子元件資料傳遞 例如 乙個下拉框的列表資料 options 來自父元件。子元件 import from angular core input options array 在子元件中，可以自由使用 options 物件。在 js 中通過 this.options 去訪問列表資料 在 html 中 直...