Detailed explanation of how to pass values between Angular parent and child components?

This article will introduce to you the method of passing values between parent and child components inAngular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "angular Tutorial"

AngularPassing values from parent to child components

Official address: https://angular.cn/guide/component-interaction#component-interaction

1. Parent component passes value to child component

• # Description: When the parent component passes value to child component, the parent component binds to the selector of the child component. Just the data
• needs to be introduced when the sub-component receives itinputModuleimport { Component, OnInit, Input} from '@angular/core'
• The sub-component also needs to use syntax sugar to receive the parameters passed by the parent component@input() transData

1.1 Parent componenthero-parent

1、hero-parent.component.html

这是父组件
 

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 {} }

1.2 Child componenthero-child

1、hero-child.component.html

{{transData}}

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) } }

1.3 Rendering

2. The component passes parameters to the parent component

• Note: When the child component passes parameters to the parent component, it needs to importOutputandEventEmitter. Introduce the moduleimport {Component, OnInit, Output, EventEmitter} from '@angular/core'
• You need to expose a method first when using it@Output() childEvent = new EventEmitter ()Used to useemitto pass data
• Specific usethis.childEvent.emit('I am the data passed by the child component')

2.1 Child componenthero-child

1. ##hero-child.component.html

   <button>我是子组件，给父组件传递参数</button>

2. 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 Parent componenthero-parent

1. hero-parent.component.html

这是父组件
 
{{receiceData}}
 

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 Rendering

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of Detailed explanation of how to pass values between Angular parent and child components?. For more information, please follow other related articles on the PHP Chinese website!