Angular는 관찰자 객체에 가입하여 다양한 구성 요소의 데이터를 실시간으로 전달합니다.
우선 서비스 앱을 정의합니다.sevice.ts, 서비스 내 new SubJect 객체:
// app.servie.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class AppService {
constructor() { }
sub = new Subject();
} 그리고 두 개의 구성 요소인 원치클과 투칠드를 앱에 정의합니다.compnent 표시:
// app.component.ts
그 중에서 원-child에는 키up을 연결하는 방법sendText:
// one-child.component.html
one-child works!
원치클에 앱을 주입합니다.서비스, sub 객체 호출:
import { Component } from '@angular/core';
import { AppService } from '../app.service'
@Component({
selector: 'one-child',
templateUrl: './one-child.component.html',
styleUrls: ['./one-child.component.scss']
})
export class OneChildComponent {
constructor(
private appService: AppService
) { }
sendText(value) {
console.log("one-child: " + value);
this.appService.sub.next(value);
}
}이 때 Two-child에서sub 대상을 구독하여 데이터를 얻습니다.
// two-child.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service'
@Component({
selector: 'two-child',
templateUrl: './two-child.component.html',
styleUrls: ['./two-child.component.scss']
})
export class TwoChildComponent implements OnInit {
value;
constructor(
private appService: AppService
) { }
ngOnInit() {
this.appService.sub.subscribe(res => {
this.value = res;
console.log("two-child: " + res);
})
}
}최종적으로 원치클에 입력된 데이터가 투칠드에서도 수신되는 것을 볼 수 있다.
마지막으로 구독 대상에 대해 구성 요소가 삭제될 때 실제 상황에 따라 구독을 취소합니다.
ngOnDestroy() {
this.appService.sub.unsubscribe();
}demo는 아래 주소에서 체험을 다운로드할 수 있으며 다운로드 후 npm install를 실행합니다.https://github.com/ldpliudong...
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
각도 비동기 파이프Angular 비동기 파이프는 구성 요소의 html에서 관찰 가능한 값을 표시하는 데 사용됩니다. 가장 큰 장점은 Angular가 observable에 대한 구독 및 구독 취소를 처리하고 사용하지 않는 구독이 없다는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
