Detaillierte Erklärung, wie Werte zwischen übergeordneten und untergeordneten Angular-Komponenten übergeben werden?

In diesem Artikel wird Ihnen die Methode zum Übergeben von Werten zwischen übergeordneten und untergeordneten Komponenten in Angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „angular Tutorial“

<span style="font-size: 20px;">Angular</span>Übergabe von Werten zwischen übergeordneten und untergeordneten Komponenten<span style="font-size: 20px;">Angular</span>中父子组件传值

官方地址：https://angular.cn/guide/component-interaction#component-interaction

1. 父组件给子组件传值

• 说明： 父组件给子组件传值的时候，父组件中在子组件的选择器上绑定数据即可<app-hero-child></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></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 子组件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)
    }
}

1.3 效果图

2. 子组件给父组件传递参数

• 说明：子组件给父组件传递参数的时候需要导入Output和EventEmitter，引入模块import { Component, OnInit, Output, EventEmitter} from '@angular/core'
• 使用的时候需要先暴露一个方法@Output() childEvent = new EventEmitter()用来使用emit传递数据
• 具体使用this.childEvent.emit('我是子组件传递的数据')

2.1 子组件hero-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 父组件hero-parent

Offizielle Adresse: https://angular.cn/guide/component-interaction#component-interaction

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

1.2 Unterkomponente hero-child

1. hero-child.component.html

rrreee2 . hero-child.component.tsrrreee

1.3-Renderings

🎜🎜🎜2. Die untergeordnete Komponente übergibt Parameter an die übergeordnete Komponente🎜🎜

• Beschreibung: Wenn die untergeordnete Komponente Parameter übergibt, muss sie Output und EventEmitter importieren und das Modul import { Component, OnInit, Output, EventEmitter einführen } from '@angular/core' code>
• Wenn Sie es verwenden, müssen Sie eine Methode @Output() childEvent = new EventEmitter() verfügbar machen, um emit zum Übergeben von Daten
• Spezifische Verwendungthis.childEvent.emit('Ich bin die von der untergeordneten Komponente übergebenen Daten')

🎜🎜2.1 Untergeordnete Komponente hero-child code>🎜🎜<ol> <li> <code>hero-child.component.htmlrrreee

hero -child.component.tsrrreee

🎜🎜2.2 Übergeordnete Komponente hero-parent🎜🎜🎜1, hero-parent.component.html🎜rrreee🎜2 , hero-parent.component.ts🎜rrreee🎜🎜2.3 Effektbild 🎜🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Werte zwischen übergeordneten und untergeordneten Angular-Komponenten übergeben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!