> 웹 프론트엔드 > JS 튜토리얼 > Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

青灯夜游
풀어 주다: 2021-06-04 11:28:53
앞으로
3009명이 탐색했습니다.

이 글에서는 Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

【관련 튜토리얼 추천: "angular tutorial"】

1: 상위 컴포넌트는 하위 컴포넌트의 데이터와 메소드를 얻습니다

즉, 하위 컴포넌트는 데이터와 메소드를 전달합니다. 상위 구성 요소에

ViewChild

데모 예:

상위 구성 요소: news
하위 구성 요소: 헤더

하위 구성 요소 헤더에 실행 메소드가 있는 경우

run(){
 console.log(‘我是header里面的run方法’);
 }
로그인 후 복사

하위 구성 요소 헤더의 실행 메소드를 호출합니다. 상위 구성 요소

1. 하위 구성 요소를 호출하고 하위 구성 요소의 이름을 정의합니다

<app-header #header></app-header>
로그인 후 복사

Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

2. 상위 구성 요소에 ViewChild를 도입합니다.

import { Component,OnInit ,ViewChild} from ‘@angular/core’;
로그인 후 복사

3. ViewChild를 사용하여 하위 구성 요소와 연결하세요

@ViewChild(‘header’)
 Header:any;
로그인 후 복사

4. 하위 구성 요소를 호출하는 방법

getChildRun(){
 this.Header.run();
 }
로그인 후 복사

Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

2: 상위 구성 요소가 하위 구성 요소에 값을 전달합니다. - @input

Demo 예:

Parent 컴포넌트: home
자식 컴포넌트: header

부모 컴포넌트는 간단한 데이터를 자식 컴포넌트에 전달할 수 있을 뿐만 아니라, 자신의 메서드와 전체 부모 컴포넌트를 자식 컴포넌트에 전달할 수도 있습니다

그래서 다음의 메서드를 호출할 수 있습니다. 하위 구성 요소의 상위 구성 요소

1. 상위 구성 요소가 하위 구성 요소

 <app-header [title]="title" [homeWork]="homeWork"  [homepage]=&#39;this&#39;></app-header>
로그인 후 복사

Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

2를 호출할 때 데이터를 전달합니다. 하위 구성 요소는 상위 구성 요소로부터 데이터를 받습니다

import { Component, OnInit ,Input } from ‘@angular/core’;
로그인 후 복사

4. 하위 구성 요소에서 상위 구성 요소의 데이터를 사용합니다

이것은 헤드 구성 요소입니다.-{{title}}

5. 하위 구성 요소에서 상위 구성 요소를 사용하는 방법Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

요약: 아버지에서 아들로 전달: @input

아들에서 아버지로 전달: ViewChild

3. Output

데모 예: 상위 구성 요소: news 하위 구성 요소: footer


1 하위 구성 요소는 하위 구성 요소

@Output()private에서 Output 및 EventEmitter

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

    constructor() { }
    ngOnInit() {}
}
로그인 후 복사

2를 소개합니다. external=new EventEmitter();/EventEmitter 및 출력 데코레이터를 사용하여 지정된 유형 변수 사용/


3. 하위 구성 요소는 EventEmitter 객체 외부 인스턴스

import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;
로그인 후 복사

4를 통해 데이터를 브로드캐스트합니다. 하위 구성 요소, 수신 이벤트 정의, 외부는 하위 구성 요소의 EventEmitter 객체입니다. getFooterRun 메소드를 사용하면 Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명

파일: Componentsnewsnews.comComponent.ts

sendParent(){
 this.outer.emit(‘msg from child’)
 }
로그인 후 복사

5. 비부모-자식 구성요소 통신

1. 로컬 저장소( 권장)Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명 3. Cookie

요약:

vue

에서 $emit 사용

2. 하위 구성 요소는 $emit를 사용하여 상위 구성 요소의 사용자 정의 이벤트를 트리거할 수 있습니다.

<app-footer (outer)=“getFooterRun(data)”>
로그인 후 복사


angular

1. 상위 구성 요소는 attribute

를 사용하여 하위 구성 요소에 데이터를 전달할 수 있으며 하위 구성 요소는 @input을 통해 이를 허용합니다.

2. 하위 구성 요소는 Output 및 EventEmitter를 사용하여 상위 구성 요소의 사용자 정의 이벤트를 트리거할 수 있습니다. 상위 구성 요소

//接收子组件传递过来的数据
 getFooterRun(data){
 console.log(data);
 }
로그인 후 복사

하위 구성 요소

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;
로그인 후 복사
<app-footer (event)=“getFooterRun(data)”>
로그인 후 복사
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오를 방문하세요! !

위 내용은 Angular에서 상위 구성요소와 하위 구성요소 간에 매개변수를 전달하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿