Angular4-input以及output

前方記錄了屬性繫結的方式,以及元件的建立方式,但如果元件跟元件之間要傳遞參數呢?這就需要用到input以及output了!

 

在用之前必須先了解,每個元件都是獨立的,而A元件的html中,呼叫B元件的這個行為

在此我把A元件視為「父元件」,把B元件視為「子元件」

父元件在建立子元件時,一併給予參數,這是input

子元件的某事件被觸發後,透過事件回傳參數,這是output

 


首先先來建立二個元件

1.父元件命名為baba

2.子元件命名為pihai 


先來實作input

1.到baba元件中,呼叫pihai 元件出來玩,這步驟只是叫出子元件而已

2.在pihai 元件的ts中建立一個Intput的參數,第一行需加入Import的Input屬性

另外必須特別注意的一點是I是大寫,剛寫不熟悉又找了許久XD...

語法1.@Intput():baba元件呼叫時,要傳入的參數名稱就是babaGiveMe

語法2.@Intput('自定義名稱'),此時baba元件傳入時,就必須使用自定義名稱才行,簡單說就只把參數名稱改名而已啦XD

語法3..@Intput() '自定義名稱' :number 這個寫法是「不僅要定義名稱,同時也要規範型別」

注意:語法2、3不可以混用,例如「@Intput('自定義名稱')  :number」剛學不知道又掉進坑裡找了許久...

3.在pihai 件中的html把屬性繫結出來

4.再回來修改baba元件

pihai 中需要的參數,在這邊使用屬性繫結的方式來達成,至於name則是在baba元件中的ts中宣告

這樣就可以完成input啦~


再來做做看output~一樣先做pihai元件

ts中要做的事情

1.首先我們必須import屬性Output、EventEmitter

2.建立準備發射的型別

  forbabaDerData: string = "要給爸爸的資料";
  @Output()
  forbabaDerEmt = new EventEmitter<string>();

須注意forbabaDerEmt這個名稱!!!!!!

3.再元件載入完成時,將forbabaDerData參數送出

  ngOnInit() {
    this.forbabaDerEmt.emit(this.forbabaDerData);
  }

pihai完整的程式碼

再來看看baba的html檔案該怎麼改

注意!

我們看到forbabaDerEmt這個物件,變成一個事件了,由此可知output是把透過EventEmitter型別中的emit,把事件觸發,而這個事件可以帶參數。

在這邊必須用「$event」去接pihai元件送出來的資料,推測是因為是事件所送出來的,所以必須包成$event,我直接用value是接不到值的!

再來看看baba元件的ts檔案怎麼寫吧

如果是其他型別就直接在這邊轉型吧XD


LINE討論群FB討論區

歡迎您的加入,讓這個社群更加美好!

聯絡方式:
FaceBook
E-Mail