Angular学习系列六：Input,Output实现组件之间传值

1：新建项目后，新增两个组件:

　　ng g component relations/footer （子组件）

　　ng g component relations/home  （父组件）

2：引用

　　在app.component.html中引用home标签：<app-home></app-home>

　　在home.component.html中引用footer标签：<app-footer></app-footer>

3：实现目标:

父组件调用子组件信息：ViewChild（上一篇有写）

子组件调用父组件信息新：Input

子组件推送信息给父组件：Output,EventEmitter 

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild("footer",{static:true}) footer:any;
  public msg: any = "我是home给header的 msg";

  public title: any = "我是home给header的 title";
  constructor() { }

  ngOnInit() {
  }

  run() {
    alert("我是home里面的run方法哦");
  }

  recevied(e) {

    console.log(e);
    alert("我是父组件的recevied方法，将会通过子组件推送，调用到该方法");
  }

  getFooterMethod(){
    this.footer.getData();
  }
}

home.component.html

<!-- 这里改了app-header->app-header2 标签 调用失败-->
<!-- <app-header2 [title]="title" [msg]="msg"></app-header2> -->

<app-footer [title]="title" [msg]="msg" [run]='run' (son)="recevied($event)" #footer></app-footer>

<button (click)="getFooterMethod()">我可以调用子组件的方法哦</button>
<p>home works!</p>
<hr>

footer.component.ts

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  @Output() private son:any= new EventEmitter();
  @Input() msg:any;
  
  @Input() title:any;

  @Input() run:any;
  constructor() { }

  ngOnInit() {
  }

  runParent(){
    this.run();
  }

  sendDataToParent(){
    this.son.emit("我是子组件，现在我要推送了哈");
  }

  getData(){
    alert("我只是一个子组件");
  }

}

footer.component.html

<p>footer works!</p>
<p>{{msg}}</p>

<p>{{title}}</p>


<button (click)="runParent()"> 子组件调用父组件的方法</button>

<button (click)="sendDataToParent()"> 子组件推送消息，让父组件的方法被执行</button>
<hr>

4：效果图