Angular笔记 父子组件传值

一、子组件获取父组件值

1. 在子组件ts里面引入Input。
2. 子组件声明Input属性。
3. 子组件调用。

子组件

ts中

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

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

 //声明属性
  @Input('news') news:any; 

  constructor() { }

  ngOnInit() {
  }

   //-------->调用方法
   // 获取父组件信息
   getChildMsg(){
    alert(this.news.msg);
  }
  // 获取父组件方法
  getChildFun(){
    this.news.run();
  }
  // 改变父组件元素
  changeChildE(){
    this.news.myMsg = "改变呀";
  }

}

html中

<p>footer works!</p>
<!-- 调用方法 -->
<button (click)="changeChildE()">改变父组件元素</button><br>
<button (click)="getChildMsg()">获取父组件信息</button><br>
<button (click)="getChildFun()">获取父组件方法</button>

父组件

ts中

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

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


  //声明属性
  public msg:string = '我是父组件的msg';
  //声明属性
  public myMsg:string = ""


  constructor() { }

  ngOnInit() {
  }

 //声明方法
  run(){
    alert('我是父组件的方法');
  }

}

html中

<p>news works!====>{{myMsg}}</p>
<br>
<hr>
<br>
<!-- 赋值给子组件 -->
<app-footer [news]="this"></app-footer>

二、父组件获取子组件值

1. 在父组件ts里面引入ViewChild。
2. 父组件声明ViewChild属性。
3. 父组件调用。

父组件

ts中

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

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


//声明ViewChild属性
  @ViewChild('header',null) myHeader:any;

  constructor() { }

  ngOnInit() {
  }
  // 获取子组件信息
  getChildMsg(){
    alert(this.myHeader.msg);
  }
  // 获取子组件方法
  getChildFun(){
    this.myHeader.run();
  }
  // 改变子组件元素
  changeChildE(){
    this.myHeader.myMsg = "改变呀";
  }

}

html中

<app-header #header></app-header>
<br>
<hr>
<br>
<!-- 调用方法 -->
<button (click)="changeChildE()">改变子组件元素</button><br>
<button (click)="getChildMsg()">获取子组件信息</button><br>
<button (click)="getChildFun()">获取子组件方法</button>

子组件

ts中

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

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

  public msg:string = "我是子组件的msg";


  public myMsg:string = ""

  constructor() { }

  ngOnInit() {
  }

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

}

html中

<p>header works!------{{myMsg}}</p>

三、父子组件相互传值(通知机制)

以子传父值为例。
注：
调用通知名称一定要和声明的地方一致。

子组件

ts中

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

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

//声明 属性
  @Output() private centerOutPut =new  EventEmitter();


  public msg:string = "我是子组件的msg  通知来的";

  public myMsg:string = ""

  constructor() { }

  ngOnInit() {
  }

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

  callParent(){
    // this.centerOutPut.emit("我来自子组件 通知来的");
    this.centerOutPut.emit(this);
  }

}

html中

<p>center works! ---{{myMsg}}</p>
<button (click)="callParent()">callParent</button>

父组件

ts中

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

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

  constructor() { }

  public myMsg:string = "";

  ngOnInit() {
  }


  childCallMe(e:any){
    // alert('这是父组件的方法\n'+ e);
    // this.myMsg = e;
    let center:any = e;

    center.run();

  }


}

html中

<p>set works!---->{{myMsg}}</p>
<br>
<hr>
<br>
<!-- 注意通知名称一定要和声明的地方一致 -->
<app-center (centerOutPut)="childCallMe($event)"></app-center>