angular4.x父子组件传值和方法

2017-11-05

父组件向子组件传递值以及子组件触发父组件方法和向父组件传递参数

父子组件传值

1 父组件向子组件的传入数据

[msg]=”msg” 左侧是名称-右侧是数据

1	<app-header [msg]="msg"></app-header>

export class HttpNewsComponent implements OnInit {
    public msg = '这是父组件的数据';
    constructor() {

    }
}

2 子组件引入Input模块

import { Component, OnInit,Input } from '@angular/core';
export class HeaderComponent implements OnInit {
  @Input() msg:any;  // 通过Input接收父组件传过来的数据msg
  constructor() {

  }
}

header组件在页面直接就能调用接受过来msg的数据
1
{{msg}}
子组件触发父组件方法

父组件的方法

1	<app-header [run]='run'></app-header>

export class HttpNewsComponent implements OnInit {
    constructor() {

    }
    run(){
      alert('这是父组件的run方法');
    }
}

子组件接收父组件传递的方法

//引入Input
import { Component, OnInit,Input } from '@angular/core';
export class HeaderComponent implements OnInit {
    @Input() run: any; //接受父组件传过来的run方法
    constructor(){

    }
}

1	<button (click)='run()'>执行父组件方法</button>

子组件自定义方法执行父组件方法并传递参数

父组件

1	<app-header [getDataFromChild]='getDataFromChild'></app-header>

export class HttpNewsComponent implements OnInit {
    constructor() {

    }
    //父组件的方法以及子组件传递过来的参数
   getDataFromChild(childData){
     alert(childData);
   }
}

子组件

1	<button (click)='sendParent()'>执行父组件方法</button>

import { Component, OnInit,Input } from '@angular/core';
export class HeaderComponent implements OnInit {
    @Input() getDataFromChild: any; //接受父组件传过来的方法
    public msginfo = '我是子组件的数据';
    constructor(){

    }
    /*子组件自己的方法 */
    sendParent(){
     /*子组件调用父组件的方法并传递参数 */
      this.getDataFromChild(this.msginfo);
    }
}

子组件通过@Output执行父组件的方法

子组件引入Output和EventEmitter

1	<button (click)='requesrParentData()'>执行父组件方法通过@Output</button>

import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
export class OutputNewsComponent implements OnInit {
constructor() { }
  //EventEmitter 通过事件驱动实现子组件给父组件传值
  //可以通过toparent广播数据（自定义的字段）
  @Output() toparent = new EventEmitter();

  requesrParentData() {
    //调用父组件的方法请求数据也可以传值
     this.toparent.emit('这是子组件的值');
  }
}

父组件

1 2	//引入子组件通过toparent触发父级方法$event是接收传递过来的参数 <app-output-news (toparent)='requestData($event)'></app-output-news>

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp, Headers } from '@angular/http';
export class HttpNewsComponent implements OnInit {
    public list:any[];
    constructor(private http: Http) {

    }
    requestData(e){
      console.log(e);//子组件传递的参数
      let _that = this;
      let url = 'http://www.phonegap100.com/appapi.php?
      a=getPortalList&catid=20&page=1';
      this.http.get(url).subscribe(function (data) {
        //拿到的是json字符串 需要转换成json对象
          var list = JSON.parse(data['_body']);
          _that.list = list['result'];
        }, function (err) {
          console.log('失败');
        }
      );
    }
}