angular 4 中關於父子元件傳值的示例

2022-03-28 19:16:01 字數 4201 閱讀 5286

1home.component.ts

2

3import from '@angular/core';4

[email protected]()

10 export class homecomponent implements

oninit

1314

ngoninit() 16;

1920 }

header.component.html

<

h1 class

="header"

>this is }

h1>

<

hr />

<

button

(click)

='childfun()'

>呼叫父元件的方法

button

>

<

button

(click)

='childoutfun()'

>子元件廣播事件向父元件傳值

button

>

<

hr />

header.component.ts

import from '@angular/core';//

import from 'protractor';

@component()

export

class headercomponent implements

oninit, ondestroy, onchanges

ngoninit()

ngondestroy()

ngonchanges()

childfun()

///子元件定義一個output的屬性,來作為父元件的引用,進行廣播

///父元件通過,監聽這樣一個子元件的廣播屬性,來響應子元件的操作 注意:由於是事件,所以用 ()

childoutfun()

childfunforparent()

}

news.component.ts

import from '@angular/core'

;import from '@angular/common/http'

;@component()

export

class newscomponent implements

oninit, afterviewinit ) headerchild;

public

news: any;

protected spanhtml: string = ''

; protected id:

number = 100;

public search: string = '';

public msg: string = '這是news的header'

; constructor(

private

http: httpclient) ,,,

,]},,

,,,]

},];

} ngoninit()

ngafterviewinit()

getapidata() ?term=$&media=music&limit=20`;

this.http.jsonp(url, 'callback'

).subscribe(

function

(data) ,

function

(error) )

} ///父元件通過屬性傳值公開給子元件的方法

parentfun(msg)

///父元件監聽的子元件方法

parentaimedfun(e)

////父元件通過viewchild直接呼叫子元件的方法

excutechildfunbyviewchild()

}

news.component.html

<

[msg]

='msg'

[parentfun]

='parentfun'

(childout)

='parentaimedfun($event)'

#headerchild

>

>

<

button

(click)

="headerchild.childfunforparent()"

>試試父元件執行子元件方法

button

>

<

button

(click)

="excutechildfunbyviewchild()"

>試試父元件通過viewchild執行子元件方法

button

>

<

br>

<

p>news works!

p>

<

span

[innerhtml]

="spanhtml"

>

span

>

<

div

[id]

="id"

>

div>

<

div>

<

ul>

<

li *ngfor

="let item of news;let key=index"

>

系列:}

<

br>

車型數量:}

<

ol>

<

div

*ngif

="item.brand.length>0"

>

<

li *ngfor

="let car of item.brand;let key=index"

>

車型:}

li>

div>

<

div

*ngif

="item.brand.length==0"

>

暫無更多資料

div>

ol>

li>

ul>

div>

<

hr />

<

h2>jsonp查詢資料

h2>

輸入關鍵字:

<

input

type

="text"

[(ngmodel)]

="search"

/>

<

button

(click)

="getapidata()"

>點選查詢

button

>

父元件向子元件傳值的方法:

1.通過對子元件的引用,給子元件繫結 屬性,如

其中:msg parentfun 都是 父元件給子元件繫結的屬性

子元件通過@input() 屬性名:type(型別 不知道則為any)來獲取

父元件的屬性傳值

例如:@input() msg: string;

@input() parentfun: any;

2.關於output的用法

output是和eventemitter一起使用來實現父子元件傳值的

原理:a 子元件進行事件廣播

b 父元件在引用的子元件時,監聽廣播事件,既然是事件,那麼寫法肯定是(事件名稱)='父元件的事件函式()'

@output() childbroadcastevent=new eventemitter() 注意:t即為傳播的資料型別

childoutevent()

即釋出訂閱模式,來實現值的傳輸

當子元件的某個操作觸發childoutevent的時候,函式呼叫:childbroadcastevent 廣播事件,而父元件監聽這個事件

所以就可以接受來自子元件的資料

3.使用viewchild

父元件申明 @viewchild('子元件的selector') 這時候,相當於拿到子元件的例項,然後就可以直接呼叫子元件的方法或者使用子元件的屬性了

可以理解為**模式