Angular4-父子组件传值@input@output
2018-01-03 16:53
525 查看
父组件传值给子组件
在页面引入input
import { Input } from '@angular/core';
父组件传值给子组件
<app-index [title]="title" [run]="run"></app-index>
子组件使用
@Input() title; @Input() run; 这样就可以直接使用{{title}},和this.run()在子组件使用父组件的值和方法。
子组件主动发送数据给父组件
引入Output,EventEmitter
import {Output,EventEmitter} from "@angular/core";
在页面使用
@Output() private childOuter = new EventEmitter(); // 子组件主动发送数据 this.childOuter.emit("我是子组件的数据");
在父组件中接收数据
// childOuter即是子组件发送的outer(类似Android中的广播) <app-index (childOuter)="getData($event)"></app-index> // ts文件中: getData(msg:string) { console.log(msg);// 接收到的数据 }
父组件主动调用子组件
// 引用子组件 <app-index #index></app-index> // 使用子组件中的方法 <button (click)="index.childRun()">调用index中的方法</button>
也可以在ts文件中调用:
// 引用子组件 html文件 <app-index #index></app-index> <button (click)="parentClick(index)">调用index中的方法</button> // ts 文件 parentClick(obj) { obj.childRun(); }
ViewChild主动获取数据
在页面中引入ViewChild
import { ViewChild } from '@angular/core'; @ViewChild("index") index; // html中引用组件 <app-index #index></app-index> <button (click)="parentClick()">调用index中的方法</button> // ts文件中使用子组件的方法和数据 parentChild() { this.index.childRun(); }
相关文章推荐
- Angular 2父子组件数据传递之@Input和@Output详解 (上)
- Angular 2父子组件数据传递之@Input和@Output详解(下)
- Angular 组件之间数据的传递 之 @Input @Output
- @Input和@Output 父子组件传值
- Angular2父子组件之间数据传递:@Input和@Output (上)
- Angular2父子组件之间数据传递:@Input和@Output (下)
- 【Angular】组件之间通讯 Input & Output
- angular中不同的组件间传值与通信的方法
- angular @input @output
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Angular 2父子组件之间共享服务通信的实现
- angular2向组件中传值的问题
- angular 组件间的交流(1)--@Output 和@Input
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Angular2父子组件之间数据传递:父子组件共享服务通信
- VUE之父子组件间传值
- vue基础语法以及父子组件如何相互传值
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Angular 2 父子组件数据通信
- vue 中父子组件传值:props和$emit