小编给大家分享一下Angular父子组件间怎么传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
Angular
中父子组件传值
官方地址:https://angular.cn/guide/component-interaction#component-interaction
1. 父组件给子组件传值
说明: 父组件给子组件传值的时候,父组件中在子组件的选择器上绑定数据即可<app-hero-child [transData]='tran_childData'></app-hero-child>
子组件接收的时候需要引入input
模块import { Component, OnInit, Input} from '@angular/core'
子组件还需要使用语法糖的形式接收父组件传递的参数@input() transData
1.1 父组件hero-parent
1、hero-parent.component.html
<p>这是父组件</p> <app-hero-child [transData]='tran_childData'></app-hero-child>
2、hero-parent.component.ts
import { Component, OnInit } from '@angular/core' @Component({ selector: 'app-hero-parent', templateUrl: './app-hero-parent.component.html', styleUrls: ['./app-hero-parent.component.scss'] }) export class HeroesComponent implements OnInit { tran_childData:string = '这是父组件传递给子组件的数据' constructor() {} ngOnInit(): void {} }
hero-child
1、hero-child.component.html
<p>{{transData}}</p>
2、hero-child.component.ts
import { Component, OnInit, Input} from '@angular/core' @Component({ selector: 'app-hero-child', templateUrl: './app-hero-child.component.html', styleUrls: ['./app-hero-child.component.scss'] }) export class DetailComponent implements OnInit { @Input() transData: string constructor() {} ngOnInit(): void { console.log(this.transData) } }
2. 子组件给父组件传递参数
说明:子组件给父组件传递参数的时候需要导入Output
和EventEmitter
,引入模块import { Component, OnInit, Output, EventEmitter} from '@angular/core'
使用的时候需要先暴露一个方法@Output() childEvent = new EventEmitter()
用来使用emit
传递数据
具体使用this.childEvent.emit('我是子组件传递的数据')
2.1 子组件hero-child
hero-child.component.html
<button (click)='transData_to_parent()'>我是子组件,给父组件传递参数</button>
hero-child.component.ts
import { Component, OnInit, Output, EventEmitter} from '@angular/core' @Component({ selector: 'app-hero-child', templateUrl: './app-hero-child.component.html', styleUrls: ['./app-hero-child.component.scss'] }) export class DetailComponent implements OnInit { @Output() childEvent = new EventEmitter() constructor() {} ngOnInit(): void {}, // 给父组件传递参数 transData_to_parent() { this.childEvent.emit('我是子组件传递的数据') } }
2.2 父组件hero-parent
1、hero-parent.component.html
<p>这是父组件</p> <p>{{receiceData}}</p> <app-hero-child (childEvent)='receive_child_data($event)'></app-hero-child>
2、hero-parent.component.ts
import { Component, OnInit } from '@angular/core' @Component({ selector: 'app-hero-parent', templateUrl: './app-hero-parent.component.html', styleUrls: ['./app-hero-parent.component.scss'] }) export class HeroesComponent implements OnInit { constructor() {} ngOnInit(): void {} receiceData:string // 接收子组件传递的数据 receive_child_data(data) { this.receiceData = data } }
2.3 效果图
以上是“Angular父子组件间怎么传值”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。