angular 使用 @input、@Output 來進行父子組件之間數據的傳遞。

如下：

父元素：

<child-root parent_value="this is parent value" (child_emit)="test()"></child-root>

父元素標簽中有一個屬性是，parent_value，在子元素中可以使用該值：

<p [title]="parent_value" >this paragraph‘s title is from parent‘s(parent-root) attribute parent_value</p>

在子元素中，我們 p 標簽的 title 屬性綁定了父元素的 parent_value 屬性，這裏要註意了，

[title]="parent_value" 的意思並不是指 title 的值就是 "parent_value" 這個字符串，而是父元素中指定的 parent_value 屬性的值。

這裏，我們需要做的處理是，在子組件中，使用 @Input 去註解 parent_value 屬性，指明這是一個來自父組件的元素。

在上面的例子中，父元素也定義了一個屬性 child_emit，值是 test()，也就是說這是一個函數調用，在父元素組件中有一個 test 函數，可是我們應該怎麽調用呢？我們畢竟沒有 child_emit 這種事件，這時候我們就可以在子元素中觸發父元素的這個 test 方法的調用。

但是首先我們先要在子元素組件中把 child_emit 使用 @Output 進行註解，然後將其值設為 new EventEmitter，當我們在子組件中去調用 child_emit 方法的時候，父元素中 child_emit 的值的方法(test)就會被調用。

源碼如下：

child.component.ts

import {Component, EventEmitter, Input, Output} from "@angular/core";

@Component({
  selector: ‘child-root‘,
  template: `    
  <p [title]="parent_value" >this paragraph‘s title is from parent‘s(parent-root) attribute parent_value</p>
  <button class="btn-font-family" (click)="trigger()">點擊的時候會觸發父元素 example-root 的 child_emit 對應的事件</button>
  `
})
export class ChildComponent {

  @Input()
  parent_value;

  @Output()
  child_emit = new EventEmitter();

  trigger() {
    this.child_emit.emit()
  }
}

parent.component.ts

import {Component, Output} from "@angular/core";

@Component({
  selector: ‘example-root‘,
  template: `    
    <child-root parent_value="this is parent value" (child_emit)="test()"></child-root>
  `,
})
export class ParentComponent {
  @Output()
  parent_value;

  test ()  {
    console.log(‘call by emit at ‘ + new Date().toLocaleString())
  }
}

完整源碼：https://github.com/eleven26/angular-example/tree/master/src/input_output_example

angular 的 @Input、@Output 的一個用法