Angular에서 구성 요소가 서로 통신하는 방법에 대해 이야기해 보겠습니다.
- 青灯夜游앞으로
- 2022-04-24 10:37:262516검색
이 글은 angular를 계속 학습하고 Angular의 컴포넌트 통신 방법을 배우는 데 도움이 되기를 바랍니다.
이전 기사에서는 빠른 개발을 위해 Angular와 NG-ZORRO의 결합에 대해 이야기했습니다. 프런트 엔드 개발은 주로 구성 요소 기반 개발이며 항상 구성 요소 간의 통신과 분리될 수 없습니다. 그렇다면 Angular 개발에서 구성 요소 간의 통신은 무엇입니까? [관련 튜토리얼 권장 사항: "Angular 开发中，其组件之间的通信是怎么样的呢？【相关教程推荐：《angular教程》】
举一反三，
Vue和React中大同小异
本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～
1. 父组件通过属性传递值给子组件
相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。Show you the CODE。
<!-- parent.component.html --> <app-child [parentProp]="'My kid.'"></app-child>
在父组件中调用子组件，这里命名一个 parentProp 的属性。
// child.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 输入装饰器
@Input()
parentProp!: string;
constructor() { }
ngOnInit(): void {
}
}子组件接受父组件传入的变量 parentProp，回填到页面。
<!-- child.component.html -->
<h1>Hello! {{ parentProp }}</h1>2. 子组件通过 Emitter 事件传递信息给父组件
通过 new EventEmitter() 将子组件的数据传递给父组件。
// child.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 输出装饰器
@Output()
private childSayHi = new EventEmitter()
constructor() { }
ngOnInit(): void {
this.childSayHi.emit('My parents');
}
}通过 emit 通知父组件，父组件对事件进行监听。
// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit {
public msg:string = ''
constructor() { }
ngOnInit(): void {
}
fromChild(data: string) {
// 这里使用异步
setTimeout(() => {
this.msg = data
}, 50)
}
}在父组件中，我们对 child 组件来的数据进行监听后，这里采用了 setTimeout 的异步操作。是因为我们在子组件中初始化后就进行了 emit，这里的异步操作是防止 Race Condition 竞争出错。
我们还得在组件中添加 fromChild 这个方法，如下：
<!-- parent.component.html -->
<h1>Hello! {{ msg }}</h1>
<app-child (childSayHi)="fromChild($event)"></app-child>3. 通过引用，父组件获取子组件的属性和方法
我们通过操纵引用的方式，获取子组件对象，然后对其属性和方法进行访问。
我们先设置子组件的演示内容：
// child.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 子组件的属性
public childMsg:string = 'Prop: message from child'
constructor() { }
ngOnInit(): void {
}
// 子组件方法
public childSayHi(): void {
console.log('Method: I am your child.')
}
}我们在父组件上设置子组件的引用标识 #childComponent：
<!-- parent.component.html --> <app-child #childComponent></app-child>
之后在 javascript 文件上调用：
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './components/child/child.component';
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit {
@ViewChild('childComponent')
childComponent!: ChildComponent;
constructor() { }
ngOnInit(): void {
this.getChildPropAndMethod()
}
getChildPropAndMethod(): void {
setTimeout(() => {
console.log(this.childComponent.childMsg); // Prop: message from child
this.childComponent.childSayHi(); // Method: I am your child.
}, 50)
}
}这种方法有个限制?，就是子属性的修饰符需要是 public，当是 protected 或者 private 的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：
| 类型 | 使用范围 |
|---|---|
| public | 允许在累的内外被调用，作用范围最广 |
| protected | 允许在类内以及继承的子类中使用，作用范围适中 |
| private | 允许在类内部中使用，作用范围最窄 |
4. 通过 service 去变动
我们结合 rxjs 来演示。
rxjs 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。
后期会有一篇文章记录
rxjs，敬请期待
我们先来创建一个名为 parent-and-child 的服务。
// parent-and-child.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有实时的作用，获取最新值
@Injectable({
providedIn: 'root'
})
export class ParentAndChildService {
private subject$: BehaviorSubject<any> = new BehaviorSubject(null)
constructor() { }
// 将其变成可观察
getMessage(): Observable<any> {
return this.subject$.asObservable()
}
setMessage(msg: string) {
this.subject$.next(msg);
}
}接着，我们在父子组件中引用，它们的信息是共享的。
// parent.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
// 引入服务
import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
import { Subject } from 'rxjs'
import { takeUntil } from 'rxjs/operators'
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit, OnDestroy {
unsubscribe$: Subject<boolean> = new Subject();
constructor(
private readonly parentAndChildService: ParentAndChildService
) { }
ngOnInit(): void {
this.parentAndChildService.getMessage()
.pipe(
takeUntil(this.unsubscribe$)
)
.subscribe({
next: (msg: any) => {
console.log('Parent: ' + msg);
// 刚进来打印 Parent: null
// 一秒后打印 Parent: Jimmy
}
});
setTimeout(() => {
this.parentAndChildService.setMessage('Jimmy');
}, 1000)
}
ngOnDestroy() {
// 取消订阅
this.unsubscribe$.next(true);
this.unsubscribe$.complete();
}
}import { Component, OnInit } from '@angular/core';
import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
constructor(
private parentAndChildService: ParentAndChildService
) { }
// 为了更好理解，这里我移除了父组件的 Subject
ngOnInit(): void {
this.parentAndChildService.getMessage()
.subscribe({
next: (msg: any) => {
console.log('Child: '+msg);
// 刚进来打印 Child: null
// 一秒后打印 Child: Jimmy
}
})
}
}在父组件中，我们一秒钟之后更改值。所以在父子组件中，一进来就会打印 msg 的初始值 null，然后过了一秒钟之后，就会打印更改的值 Jimmyangular Tutorial
한 예에서 다른 사례를 추론해 보면Vue와React는 약간의 차이점을 제외하고 유사합니다1 상위 구성 요소는 속성을 하위 구성 요소에 전달
하는 것은 속성을 사용자 정의하고 구성 요소 도입을 통해 하위 구성 요소에 값을 전달하는 것과 같습니다.코드를 보여주세요. 🎜rrreee🎜상위 구성 요소의 하위 구성 요소를 호출하고 여기서parentProp속성의 이름을 지정합니다. 🎜rrreee🎜하위 구성 요소는 상위 구성 요소가 전달한parentProp변수를 받아들이고 이를 페이지에 다시 채웁니다. 🎜rrreee2. 하위 구성 요소는 Emitter 이벤트를 통해 상위 구성 요소에 정보를 전달합니다.
🎜new EventEmitter() 하위 구성 요소의 데이터를 상위 구성 요소에 전달합니다. 🎜rrreee🎜 <code>emit을 통해 상위 구성 요소에 알리면 상위 구성 요소가 이벤트를 수신합니다. 🎜rrreee🎜상위 구성 요소에서는하위구성 요소의 데이터를 모니터링한 후setTimeout의 비동기 작업을 사용합니다. 하위 구성 요소를 초기화한 후emit을 수행했기 때문입니다. 여기서 비동기 작업은Race Condition경쟁 오류를 방지하기 위한 것입니다. 🎜🎜다음과 같이 구성 요소에fromChild메서드를 추가해야 합니다. 🎜rrreee3 참조를 통해 상위 구성 요소는 다음을 얻습니다. 하위 구성 요소의 속성 및 메서드
🎜참조를 조작하여 하위 구성 요소 개체를 얻은 다음 해당 속성과 메서드에 액세스합니다. 🎜🎜먼저 하위 구성 요소의 데모 콘텐츠를 설정합니다. 🎜rrreee🎜상위 구성 요소에 하위 구성 요소#childComponent의 참조 식별자를 설정합니다. 🎜rrreee🎜그런 다음javascript 파일 호출: 🎜rrreee🎜이 방법에 제한이 있나요? 즉, 하위 속성의 수정자는 <code>보호될 때public이어야 합니다. 또는private때때로 오류가 보고됩니다. 하위 구성 요소의 수정자를 변경해 볼 수 있습니다. 오류 원인은 다음과 같습니다. 🎜
유형 사용 범위 공개 가장 넓은 범위로 클래스 내부 및 외부에서 호출할 수 있습니다. 보호 클래스 내에서 호출을 허용하며 상속된 하위 클래스에서 사용되며 범위는 보통입니다.비공개 클래스 내에서 사용이 허용됩니다. , 범위가 가장 좁음 tr>4. 서비스를 통한 변경
🎜우리는rxjs를 결합하여 시연합니다. 🎜🎜rxjs는 비동기 또는 콜백 기반 코드를 더 쉽게 작성할 수 있게 해주는Observables를 사용하는 반응형 프로그래밍용 라이브러리입니다. 🎜🎜나중에🎜먼저rxjs를 기록한 글이 나올 예정이니 지켜봐주세요🎜parent-and-child라는 서비스를 만들어 보겠습니다. 🎜rrreee🎜다음으로 상위 및 하위 구성요소에서 이를 참조하고 해당 정보를 공유합니다. 🎜rrreeerrreee🎜부모 구성 요소에서는 1초 후에 값을 변경합니다. 그래서 parent-child 컴포넌트에서는msg의 초기값null이 들어오자마자 출력되고, 1초 후에는 변경된 값가 출력됩니다. Jimmy
위 내용은 Angular에서 구성 요소가 서로 통신하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제