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 in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "angular Tutorial"

<span style="font-size: 20px;">Angular</span> Passing 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<app-hero-child></app-hero-child>
• needs to be introduced when the sub-component receives it inputModuleimport { 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

<p>这是父组件</p>
<app-hero-child></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 {}
}

1.2 Child componenthero-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)
    }
}

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 import Output and EventEmitter. 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 use emit to 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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;button&gt;我是子组件，给父组件传递参数&lt;/button&gt;</pre><div class="contentsignin">Copy after login</div></div>
2. hero-child.component.ts<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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('我是子组件传递的数据')     } }</pre><div class="contentsignin">Copy after login</div></div>

2.2 Parent componenthero-parent

<p>这是父组件</p>
<p>{{receiceData}}</p>
<app-hero-child></app-hero-child>

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

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!