Angular 元件傳值

2022-09-11 14:03:24 字數 1056 閱讀 6320

在父元件ts中定義要傳遞的資訊

在父元件html中的子元件標籤中定義自定義屬性來繫結父元件定義的資訊

在子元件中的ts中,通過@input來接收自定義屬性的名稱

在子元件中的html中就能直接得到值了

} ===> father to child

方法一:@output

在子元件中匯入output 和 eventemitter

import from '@angular/core';

並且通過@output例項化要傳遞向父元件的訊息

@output() private outer = new eventemitter();

public chtofather = 'child to father';

給子元件新增點選事件,點選的時候將資料傳遞給父元件

handlerclick()

在父元件html中繫結自定義事件

在父元件的ts中通過剛剛繫結的自定義事件中的event就可以獲取到了

方法二:@viewchild

在父元件html裡的子元件標籤上定義乙個名字(#名字),相當於這個子元件的id名

在父元件的ts中引入viewchild

import from '@angular/core';

並使用@viewchild('son') son; 括號裡面的名稱要與子元件標籤#後面的名稱一致。

最後就可以呼叫子元件的資料和方法,如果子元件中有乙個資料為viewchildinfo,就可以這樣去呼叫

getdata()

Angular元件傳值

父元件中,通過 屬性 值 的方式向子元件傳值 msg 子元件中,要用 inputs 屬性 來接收引數 並且angular裡,子元件可以直接修改父元件傳來的值 component export class childcomponent implements oninit ngoninit privat...

Angular元件間傳值

在angular中,父元件呼叫子元件,可以傳遞引數,子元件根據傳遞過來的引數返回相應的資料 父元件向子元件傳參,過程如下 方法一 在子元件中 component inputs inputsvalue export class testcomponent 在父元件中 component export ...

angular父子元件傳值 二

根元件中引入父子元件import from components son2 son2.component import from components father2 father2.component declarations newscomponent,son2component,father2...