组件之间信息传递_02

组件 1

ts

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

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

  public msg:string = "footer-> msg";

  constructor() { }

  ngOnInit() {
  }

  run(){
    alert("i am footer run method....")
  }

}

复制代码

组件 2

html

<h1>父子组件之间的信息传递..</h1>
<h3>i am news component..</h3>
<app-footer #footer></app-footer>

<button  (click)="get_child_msg()">get_footer_method--> msg</button>
<br>
<button (click)="run_child_method()">get_footer_method-->run</button>
复制代码

ts

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

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

  @ViewChild("footer") footer:any;
  constructor() { }

  ngOnInit() {
  }

  get_child_msg(){
    alert(this.footer.msg);
  }

  run_child_method(){
    this.footer.run();
  }

}

复制代码