Angularの親コンポーネントと子コンポーネント間で値を渡す方法を詳しく説明します。-jsチュートリアル-php.cn

Angularの親コンポーネントと子コンポーネント間で値を渡す方法を詳しく説明します。

青灯夜游

リリース： 2021-03-22 18:44:00

転載

2399 人が閲覧しました

この記事では、Angularで親コンポーネントと子コンポーネント間で値を渡す方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angularの親コンポーネントと子コンポーネント間で値を渡す方法を詳しく説明します。

関連する推奨事項: 「angular チュートリアル」

<span style="font-size: 20px;">Angular</span> 親コンポーネントから子コンポーネントへの値の受け渡し

公式アドレス: https://angular.cn/guide/component-interaction#component-interaction

1. 親コンポーネントが子コンポーネントに値を渡す

# 説明: 親コンポーネントが子コンポーネントに値を渡すと、親コンポーネントはセレクターにバインドされます。子コンポーネントの data<app-hero-child></app-hero-child>
だけを導入する必要がある場合は、サブコンポーネントはそれを受け取ります inputModuleimport { Component, OnInit, Input} from '@angular/core'
サブコンポーネントも構文を使用する必要があります親コンポーネント @input() transData

1.1 親コンポーネントhero-parent##によって渡されたパラメータを受け取るsugar

#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 レンダリング

Angularの親コンポーネントと子コンポーネント間で値を渡す方法を詳しく説明します。

2. コンポーネントは親コンポーネントにパラメータを渡します

Output と EventEmitter.モジュールを導入しますimport {Component, OnInit, Output, EventEmitter} from '@angular/core'
@Output() childEvent = new EventEmitter ()データを渡すために emit を使用するために使用されます
this .childEvent.emit('私は子コンポーネントによって渡されたデータです')

2.1 子コンポーネントhero-child

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

ログイン後にコピー

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('我是子组件传递的数据')
    }
}

ログイン後にコピー

hero-parent

1. hero-parent.component.html

<p>这是父组件</p>
<p>{{receiceData}}</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 {
    constructor() {}
    ngOnInit(): void {}
    receiceData:string
    // 接收子组件传递的数据
    receive_child_data(data) {
        this.receiceData = data
    }
}

ログイン後にコピー

2.3 レンダリング

プログラミング関連の知識の詳細については、 Angularの親コンポーネントと子コンポーネント間で値を渡す方法を詳しく説明します。プログラミングビデオ