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는 약간의 차이점을 제외하고 유사합니다🎜 blockquote>🎜이 기사는 순수한 텍스트로 비교적 지루합니다. 콘솔에서 출력되는 내용은 상대적으로 쓸모가 없기 때문에 사진은 포함하지 않습니다. 흠~ 설명 코드를 따라가시면 독자분들이 쉽게 이해하실 수 있을 것 같습니다~🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
