Ionic开发文档

父子组件传值

发布时间 2018-5-23 16:18:25   浏览量()   收藏(1)

一、 父组件给子组件传值 -@Input

1、父组件调用子组件的时候传入数据

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

2.  子组件引入 Input 

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

3.  子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
}

4.  子组件中使用父组件的数据

<h2>这是头部组件--{{msg}}</h2>

二、 父子组件传值的方式让子组件执行父组件的方法

  1. 父组件定义方法

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

2、调用子组件传入当前方法

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

3.  子组件接收父组件传过来的方法

import { Component, OnInit ,Input } from '@angular/core';
 
export class HeaderComponent implements OnInit {
        @Input() msg:string
        @Input() run:any;
constructor() { }
}

4.  子组件使用父组件的方法。

export class HeaderComponent implements OnInit {
    @Input() msg:string;
    @Input() run:any;
constructor() { }
ngOnInit() {
    this.run(); /*子组件调用父组件的 run 方法*/
}
}

三、父组件通过局部变量获取子组件的引用 用, 通过 ViewChild 主动获取子组件的数据和方法

  1. 调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

2.  引入 ViewChild

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

3. ViewChild  和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4、调用子组件

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


广告会让浏览体验不好,可这是网站的唯一收入,请点击下面的百度广告,支持老高的开源行动吧!