元件傳值之viewchild

一. @viewchild #name獲取本html頁面元素引用

**：

參考：viewchild參考：

renderer該類包含大量可以用來操作dom原生的方法。

viewchild 是屬性裝飾器，用來從模板檢視中獲取匹配的元素。檢視查詢在 ngafterviewinit 鉤子函式呼叫前完成，因此在 ngafterviewinit 鉤子函式中，才能正確獲取查詢的元素。

在html中通過注入屬性（#名字）新增引用

1在ts中通過viewchild獲取指定元素

方法一：

import

from '@angular/core'
;@viewchild(
'myinput'
) input;
==> @viewchild(
'myinput'
) input: elementref；
ngafterviewinit(
)

方法二：

//觸發這個方法就可以通過引數box獲取到這個元素

fn(dom)

二. @viewchild 父元件獲取子元件的方法（引用） 子元件circlecomponent中定義了

getcolorredfun(i)方法，父元件中想呼叫這個方法。

html中新增標記 #circlecomponent 使用@viewchild訪問子元件

ngafterviewinit()以後才可以訪問到獲取的子元件 就可以通過

this.circlecomponent訪問子元件中的屬性和方法了。（也可以直接在方法中使用 this.自定義引用子元件元件名.方法

的方式使用！）

//--

----
----
----html---
----
----
--- //-
----
----
----
-ts---
----
----
---export class
homepage
}

import

from '../../components/live-video/live-video.component'
;export class
playbackmodelcomponent implements oninit
,afterviewinit
ngafterviewinit()

// 父元件 html 

"let item of dataset">

dataset =[,

]

}<
/span>

@input

() names: any =
childfn()

// 獲取dom元素html

this.printcontent.nativeelement.innerhtml；

五. angular生命週期鉤子函式簡單認識

每個介面都有唯一的乙個鉤子方法，由介面名加上 ng字首構成的。比如，oninit介面的鉤子方法叫做ngoninit。

生命週期的順序： ngonchanges：在ngoninit之前，當資料繫結輸入屬性的值發生變化時。

ngoninit：在第一次ngonchanges之後。 ngdocheck：每次angular變化檢測時。

ngaftercontentinit：在外部內容放到元件內之後。

ngaftercontentchecked：在放到元件內的外部內容每次檢查之後。

ngafterviewinit：在初始化元件檢視和子檢視之後。 ngafterviewchecked：在妹子元件檢視和子檢視檢查之後。

ngondestroy：在angular銷毀元件/指令之前。

vue 元件傳值 父子元件傳值，兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數，如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

元件傳值之 attrs

論vue元件傳值之 attrs 一 當前為祖父元件,傳值方式還是按照之前的傳值方式一樣。數字 p 城市 p city test div template import test from test export default 方式1 provide 方式2 provide data script ...

vue之元件傳值

父傳子 子接收props 第二種方法 this.refs.child.子元件的屬性或者方法子傳父 addsum e 父接收changesum e 第二種方法 this.parent.父元件的屬性或者方法深度傳值，用於元件多層巢狀 provide 子元件或孫元件 inject foo listener...