父傳子

通過動態屬性：

父HTML中：

<app-child01 [father]="title"></app-child01>

子ts中：

[email protected]匯入

export class Child01Component implements OnInit {

  @Input() father;
  constructor() { }

  ngOnInit() {
  }

}

2.引入Input包

import { Component, OnInit, Input } from '@angular/core';

子傳父

通過事件監聽

1.在子元件中例項化一個自定義監聽事件，引入包

@Output() personEvent = new EventEmitter();

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

2.將自定義監聽事件放到需要觸發的事件中，通過personEvent物件的emit方法，注意this的使用

export class Child02Component implements OnInit {
  
  @Output() personEvent = new EventEmitter();
  toFather = '來自子元件';
  constructor() { }
  ngOnInit() {
  }
  send = function() {
    this.personEvent.emit(this.toFather);
  };
}
 

3.在父元件中，對自定義監聽事件進行監聽，固定寫法$event接收傳值

<app-child02 (personEvent)="recive($event)"></app-child02>

4.在父元件ts檔案中寫監聽後執行的方法

export class AppComponent {
  title = 'hello World';
  toSon1 = true;
  recive = function(a) {
    alert(a);
  };
}

兄弟之間互傳

中間人模式，son01先傳給父元件，父元件傳給son02