Angular で親コンポーネントと子コンポーネントの間でパラメーターを渡す方法についての簡単な説明

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

[関連チュートリアルの推奨事項: 「angular チュートリアル」]

1: 親コンポーネントはデータとデータを取得します。子コンポーネントの Method

つまり、子コンポーネントは、ViewChild

を通じてデータとメソッドを親コンポーネントに送信します。デモ例:

親コンポーネント: news

子コンポーネント: header

サブコンポーネントのヘッダーに run メソッドがある場合

run(){
 console.log(‘我是header里面的run方法’);
 }

サブコンポーネントの run メソッドを呼び出す親コンポーネントの -component header

1. 親コンポーネントで子コンポーネントを呼び出し、子コンポーネントの名前を定義します

<app-header #header></app-header>

2. 親コンポーネントに ViewChild## を導入します

#

import { Component,OnInit ,ViewChild} from ‘@angular/core’;

3. 属性デコレータ ViewChild を使用して、今すぐサブコンポーネントに関連付けます

@ViewChild(‘header’)
 Header:any;

4. サブコンポーネントのメソッドを呼び出す

getChildRun(){
 this.Header.run();
 }

#2: 親コンポーネントが子コンポーネントに値を渡します-@input

デモ例: 親コンポーネント: home

サブコンポーネント: header

親コンポーネントは、単純なデータをサブコンポーネントに渡すだけでなく、独自のメソッドも渡すことができます。親コンポーネント全体をサブコンポーネントに渡します

したがって、サブコンポーネント内で親コンポーネントのメソッドを呼び出すことができます

1. 親コンポーネントが子コンポーネントを呼び出すときに、 data

 <app-header [title]="title" [homeWork]="homeWork"  [homepage]=&#39;this&#39;></app-header>

2. サブコンポーネントは、入力モジュール

import { Component, OnInit ,Input } from ‘@angular/core’;

3 を導入します。サブコンポーネントの親コンポーネント

export class HeaderComponent implements OnInit {
    @Input()  title:string

    constructor() { }
    ngOnInit() {}
}

4 からデータを受け取ります。コンポーネントで親コンポーネントのデータを使用します

これはヘッド コンポーネントです--{{title}}

5 、子コンポーネントで親コンポーネントを使用する方法

概要:

親から子に渡す: @input

子から親に渡す: ViewChild

3. 子コンポーネントが @Output を通じて親コンポーネントをトリガーする方法

デモ例: 親コンポーネント: news

子コンポーネント: footer

1 、サブコンポーネントは Output と EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;

を導入します2. サブコンポーネントで EventEmitter をインスタンス化します

@Output()private inner=new EventEmitter( );

/EventEmitter と出力デコレータを使用して、指定された型の変数を使用します/

3. サブコンポーネントは、EventEmitter オブジェクトの外部インスタンスを通じてデータをブロードキャストします。

#

sendParent(){
 this.outer.emit(‘msg from child’)
 }

4. 親コンポーネントが子コンポーネントを呼び出すときコンポーネントでは、受信イベントを定義します。アウターは子コンポーネントの EventEmitter オブジェクトです。アウター

#ファイル: コンポーネント\ニュース\ニュース.コンポーネント .html

<app-footer (outer)=“getFooterRun(data)”>

#5. 親コンポーネントはデータを受信すると、独自の getFooterRun メソッドを呼び出します。このとき、子コンポーネントの番号を取得できます

File:Components\ news\news.component.ts

//接收子组件传递过来的数据
 getFooterRun(data){
 console.log(data);
 }

5. 非親子コンポーネント通信

1. パブリック サービス

2. ローカルストレージ (推奨)

3. Cookie

概要:

vue での $emit の使用法

1 、親コンポーネントは

properties

を使用して子コンポーネントにデータを渡すと、子コンポーネントは props を通じてそれを受け取ります。 2. サブコンポーネントは $emit を使用して、親コンポーネントのカスタム イベントをトリガーできます。

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

angular での Emit の使用法
1. 親コンポーネントは

properties

を使用して子コンポーネントにデータを渡すことができ、子コンポーネントは @input を使用します。受け入れる。 2. サブコンポーネントは、Output と EventEmitter を使用して、親コンポーネントのカスタム イベントをトリガーできます。

親コンポーネント

<app-footer (event)=“getFooterRun(data)”>

子コンポーネント

@Output() 
private event=new EventEmitter<string>();
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

sendParent(){ 
    // outer 相当于是事件名称
    this.event.emit(data)  
 }

<button (event)=“sendParent()”>通过@Output给父组件广播数据

プログラミング関連の知識の詳細については、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular で親コンポーネントと子コンポーネントの間でパラメーターを渡す方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。