angular 父子組件傳值及通訊

----------------------------父組件，傳遞屬性到子組件-----------------------------------------------------------------
在子組件應用：
  @Input() title: any

父組件，傳值
<app-header [title]="'你好，我是來自form頁面的title'"></app-header>

-----------------------------父組件，傳遞方法到子組件----------------------------------------------------------------
父組件，傳方法：show
<app-header [title]="'你好，我是來自form頁面的title'" [run]="show"></app-header>

子組件，獲取父組件的方法
  @Input() run: any
//測試方法的傳遞
  test(): void {
      this.run();
  }

---------------------------------父組件，主動調用子組件的屬性+方法-------------------------------------------
<app-header #myheader [title]="'你好，我是來自form頁面的title'" [run]="show"></app-header>
import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
 @ViewChild('myheader', {static: true}) myheader: any

 public ngAfterViewInit() {
    console.log(this.myheader.aaa)
  }
  show() {
    alert(this.myheader.aaa)
    this.bbb = this.myheader.aaa
  }

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


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  // title = "你好，世界，我是一個頭部組件"
  @Input() title: any
  @Input() run: any

  public aaa = "我是header裏面的屬性";

  constructor() {
  }

  ngOnInit(): void {
  }

  //測試方法的傳遞
  test(): void {
    this.run();
  }

  test2(): void {
    alert(this.aaa)
  }
}

<p>header works!</p>
<h1>{{title}}</h1>

<input type="button" value="點擊我(head)" (click)="test()"/>

import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
import {SearchService} from '../../services/search.service'

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  @ViewChild('myheader', {static: true}) myheader: any
  bbb = ''

  form = {
    name: '',
    sex: "1",
    city: '',
    cityList: ['南昌', '梅州', '深圳'],
    loveList: [
      {title: '爬山', checked: true},
      {title: '籃球', checked: false},
      {title: '羽毛球', checked: true},
    ]
  }

  sname = ''

  constructor(public store: SearchService) {
    this.sname = this.store.systemName


  }


  ngOnInit(): void {
  }

  public ngAfterViewInit() {
    console.log(this.myheader.aaa)
  }

  show() {
    alert(this.myheader.aaa)
    this.bbb = this.myheader.aaa
  }
}

<app-header #myheader [title]="'你好，我是來自form頁面的title'" [run]="show"></app-header>
myheader:{{bbb}}
<input type="button" value="點擊我(form)" (click)="show()"/>
<h2>人員登記系統</h2>

<div class="people_list">
  <p>{{sname}}</p>

  <p>  {{form | json}}</p>

  <ul>
    <li>姓名：<input type="text" [(ngModel)]="form.name"/></li>
    <li>性別：<input type="radio" name="sex" value="1" [(ngModel)]="form.sex"/>男
      <input type="radio" name="sex" value="0" [(ngModel)]="form.sex"/>女
    </li>
    <li>
      所在城市：
      <select name="city" [(ngModel)]="form.city">
        <option *ngFor="let item of form.cityList">{{item}}</option>
      </select>
    </li>
    <li>興趣愛好：
      <span *ngFor="let item of form.loveList;let index = index;">
            <input type="checkbox" [name]="'love'+index" [(ngModel)]="item.checked"/>{{item.title}}
         </span>
    </li>
  </ul>
</div>