angular的父子组件的通信

父组件给子组件传值-@input

父组件

home.html

<app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header>
<br/>
<hr>
<div>我是首页组件</div>

homt.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public title:string="首页组件的标题";
  public msg:string="我是父组件的msg";
  constructor() { }

  ngOnInit() {
  }
  run(){
    alert("我是父组件的run方法");
  }
}

子组件header:

header.html

<p>头部组件!---{{msg}}</p>

<button (click)="getParentMsg()">子组件里面获取父组件传入的msg</button>
<br/>
<button (click)="getParentRun()">子组件里面执行父组件的方法</button>

header.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Input() title:any;
  @Input() msg:any;
  @Input() run:any;
  @Input() home:any;
  constructor() { }

  ngOnInit() {
  }
  getParentMsg(){
    //获取父组件的数据：
    alert(this.msg);
  }
  getParentRun(){
    // this.run();
    alert(this.home.msg);
    this.home.run();
  }
}

 父组件获取子组件的属性和方法：

父组件new.html

<app-footer #footer></app-footer>
<br/>
<hr>
<div>我是一个新闻组件</div>

<button (click)="getChildMsg()">获取子组件的msg</button>

<br/>
<button (click)="getChildRun()">执行子组件的run方法</button>

new.ts

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  @ViewChild('footer') footer:any;
  constructor() { }

  ngOnInit() {
  }
  getChildMsg(){
    alert(this.footer.msg);
  }
  getChildRun(){
    this.footer.run();
  }
}

子组件：

footer.html

<h2>我是footer子组件</h2>

footer.ts

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

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

  public msg:any="子组件的msg";
  constructor() { }

  ngOnInit() {
  }
  run(){
    alert("我是子组件的run方法");
  }

}

二、子组件通过@Output触发父组件的方法：

父组件：

.html

<app-footer (outer)="run($event)"></app-footer>

.ts

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

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

  constructor() { }

  ngOnInit() {
  }

  run(e){
    console.log(e);//子组件给父组件广播的数据
    alert("我是父组件的run方法");
  }
}

子组件：

.html

<h2>我是footer子组件</h2>
<button (click)="sendParent()">通过@Output给父组件广播数据</button>

.ts

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
  @Output() private outer=new EventEmitter();
  public msg:any="子组件的msg";
  constructor() { }

  ngOnInit() {
  }
  sendParent(){
    // alert("111");
    this.outer.emit("我是子组件的数据");
  }
}