angular 父元件和子元件

2021-10-01 16:33:25 字數 734 閱讀 3883

export class childcomponent implements oninit 

ngoninit()

greeting(name:string)

}

按鈕呼叫child2的greeting方法

@viewchild('child1')

child1:childcomponent;

ngoninit(): void

}

hello *tom*

hello **jerry**

父元件ts

test()
父元件html

子元件ts

@output() test = new elementref();

dofathermethod()

viewchild主動獲取資料

//在子元件中引入viewchild

import from '@angular/core';

@viewchild("index") index;

// html中引用元件

呼叫index中的方法

// ts檔案中使用子元件的方法和資料

parentchild()

最終可看

子元件和父元件

1.定義元件並引用 2.父元件向子元件傳值 3.子元件向父元件傳值 元件間傳值 vuex html中有元件,是一段可以被復用的結構 css中有元件,是一段可以被復用的樣式 js中有元件,是一段可以被復用的功能 vue中也有元件,指的就是乙個模組,是乙個獨立的,完整的 包含html,css,js等 可...

angular子父元件之間的互動

子元件傳遞的是乙個字串,可以根據相應的需求定義成如數字,陣列,物件等型別。import from angular core output private childouter new eventemitter output private childouter2 new eventemitter s...

Angular2 父元件中修改子元件樣式

情景 父元件fathercomponent中使用了子元件childcomponent,父元件有自己的css檔案,子元件也有自己的css檔案,在父元件中修改了子元件的樣式,但不起作用。檢視html元素的樣式表,發現 定義的樣式後面都加了個 ngcontent c 這是angular為了區分自己的樣式,...