Angular学习之旅-----父子组件传值

父组件给子组件传值

public msg = '这是父组件的msg'

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
  public msg = '这是父组件的msg'
  constructor() { }

  ngOnInit() {
  }

}

<div>
  <h2>这是父组件--{{msg}}</h2>
  <!-- 绑定属性 -->
  <app-son [msg]='msg'></app-son>
</div>

// 引入input

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

@Input() msg:string // 接收父组件传过来的值

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

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit {
  @Input() msg:string // 接收父组件传过来的值
  constructor() { }

  ngOnInit() {
  }

}

<div>
  <h2>这是子组件--{{msg}}</h2>
</div>

===============================================================================================

子组件给父组件传值

===============================================================================================

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
  public msg = '这是父组件的msg'
  constructor() { }

  ngOnInit() {
  }
  run() {
    alert('这是父组件的方法')
  }
  getDataFromChild(childData) {
    alert(childData)
  }
}

<div>
  <h2>这是父组件--{{msg}}</h2>
  <!-- 绑定属性 -->
  <app-son [msg]='msg' [run]="run" [getDataFromChild]="getDataFromChild"></app-son>
  <button (click)="run()">父组件执行run方法</button>
</div>

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

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit {
  @Input() msg: string // 接收父组件传过来的值
  @Input() run
  @Input() getDataFromChild

  public sonMsg = '这是子组件的数据'
  constructor() { }

  ngOnInit() {
  }
  sendParent() {
    this.getDataFromChild(this.sonMsg) //子组件调用父组件的方法
  }
}

<div>
  <h2>这是子组件--{{msg}}</h2>
  <button (click)="run()">子组件执行run方法</button>
  <button (click)="sendParent()">给父组件发送数据</button>
</div>

================================================================================================

1.  子组件引入 Output 和  EventEmitter

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

2.子组件中实例化  EventEmitter

 @Output() toParent = new EventEmitter()

 /*用 EventEmitter 和 output 装饰器配合使用  <string>指定类型变量*/ 

3.  子组件通过   EventEmitter  对象 outer实例广播数据

  requestFatherData2() {
    // 调用父组件的方法请求数据
    this.toParent.emit('这是子组件传给父组件的值')
  }

4.父组件调用子组件的时候，定义接收事件  , outer就是子组件的 EventEmitter 对象 outer 

<app-son [msg]='msg' [run]="run" [getDataFromChild]="getDataFromChild" (toParent)="requestData2($event)"></app-son>

5.父组件接收到数据会调用自己的 runParent方法，这个时候就能拿到子组件的数据

  requestData2(e) {
    console.log(e)
    var that = this;
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.http.get(url).pipe(map(res => res)).subscribe(function (data) {
      console.log(data)
      var list = JSON.parse(data['_body'])
      that.list6 = list['result']
      console.log(that.list6)
    }, function (err) {
      console.log(err)
    })
  }

==============================================================================================

完整的代码

<div>
  <h2>这是父组件--{{msg}}</h2>
  <!-- 绑定属性 -->
  <app-son [msg]='msg' [run]="run" [getDataFromChild]="getDataFromChild" (toParent)="requestData2($event)"></app-son>
  <button (click)="run()">父组件执行run方法</button>
  <hr>
  <ul>
    <li *ngFor="let item of list6">{{item.title}}</li>
  </ul>
</div>

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp, Headers } from '@angular/http';
// 使用rxjs
import { Observable } from 'rxjs'
// import 'rxjs/RX'
import { map } from 'rxjs/operators';
@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
  public msg = '这是父组件的msg'
  public list6: any[]
  private headers = new Headers({ 'Content-Type': 'application/json' })
  constructor(private http: Http, private jsonp: Jsonp) { }

  ngOnInit() {
  }
  run() {
    alert('这是父组件的方法')
  }
  getDataFromChild(childData) {
    alert(childData)
  }
  requestData2(e) {
    console.log(e)
    var that = this;
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.http.get(url).pipe(map(res => res)).subscribe(function (data) {
      console.log(data)
      var list = JSON.parse(data['_body'])
      that.list6 = list['result']
      console.log(that.list6)
    }, function (err) {
      console.log(err)
    })
  }
}

<div>
  <h2>这是子组件--{{msg}}</h2>
  <button (click)="run()">子组件执行run方法</button>
  <button (click)="sendParent()">给父组件发送数据</button>
  <hr>
  <button (click)="requestFatherData2()">执行父组件的方法通过@Output</button>
</div>

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

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit {
  @Input() msg: string // 接收父组件传过来的值
  @Input() run
  @Input() getDataFromChild
  // EventEmitter实现子组件给父组件传值
  @Output() toParent = new EventEmitter()

  public sonMsg = '这是子组件的数据'
  constructor() { }

  ngOnInit() {
  }
  sendParent() {
    this.getDataFromChild(this.sonMsg) //子组件调用父组件的方法
  }
  requestFatherData2() {
    // 调用父组件的方法请求数据
    this.toParent.emit('这是子组件传给父组件的值')
  }
}