이번에는 Angular 컴포넌트 간의 값 전달 및 통신 사용에 대해 자세히 설명하겠습니다. Angular 컴포넌트 간의 값 전달 및 통신에 대한 주의 사항은 무엇입니까?
이 글에서는 주로 Angular가 값을 전달하고 다양한 구성 요소에서 통신하는 방법을 소개합니다. 크게 부모-자식 구성요소와 비부모-자식 구성요소로 구분됩니다.
상위 구성요소와 하위 구성요소 간의 매개변수 및 통신 방법
이벤트 통신 사용(EventEmitter, @Output):
시나리오: 상위 구성 요소와 하위 구성 요소 간에 통신이 수행될 수 있으며 일반적으로 하위 구성 요소에서 상위 구성 요소에 메시지를 전달하는 데 사용됩니다. 단계:
// child 组件 @Component({ selector: 'app-child', template: '', styles: [``] }) export class AppChildComponent implements OnInit { @Output() onVoted: EventEmitter<any> = new EventEmitter(); ngOnInit(): void { this.onVoted.emit(1); } } // parent 组件 @Component({ selector: 'app-parent', template: ` <app-child (onVoted)="onListen($event)"></app-child> `, styles: [``] }) export class AppParentComponent implements OnInit { ngOnInit(): void { throw new Error('Method not implemented.'); } onListen(data: any): void { console.log('TAG' + '---------->>>' + data); } }
@ViewChild 및 @ViewChildren 사용:
시나리오: 일반적으로 상위 구성 요소가 하위 구성 요소에 정보를 전달하거나 상위 구성 요소가 하위 구성 요소의 메서드를 호출하는 데 사용됩니다. 단계:
상위 구성 요소에서 하위 구성 요소를 사용하세요
코드:
// 子组件 @Component({ selector: 'app-child', template: '', styles: [``] }) export class AppChildComponent2 implements OnInit { data = 1; ngOnInit(): void { } getData(): void { console.log('TAG' + '---------->>>' + 111); } } // 父组件 @Component({ selector: 'app-parent2', template: ` <app-child></app-child> `, styles: [``] }) export class AppParentComponent2 implements OnInit { @ViewChild(AppChildComponent2) child: AppChildComponent2; ngOnInit(): void { this.child.getData(); // 父组件获得子组件方法 console.log('TAG'+'---------->>>'+this.child.data);// 父组件获得子组件属性 } }
라우팅 매개변수 기준
시나리오: 목록 및 편집과 같은 라우팅을 통해 하나의 구성 요소가 다른 구성 요소로 이동할 수 있습니다. 단계:
구성 요소 A는 routerLink, router.navigate 또는 router.navigateByUrl을 사용하여 구성 요소 B로 이동합니다. 구성 요소 B는 이러한 매개 변수를 허용합니다
<a routerLink=["/exampledetail",id]></a> routerLink=["/exampledetail",{queryParams:object}] routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];router.navigate
this.router.navigate(['/exampledetail',id]); this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});router.navigateByUrl
this.router.navigateByUrl('/exampledetail/id'); this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});매개변수 전송 당사자가 매개변수를 전달한 후 수신자는 다음과 같은 두 가지 수신 방법을 갖게 됩니다. 스냅샷
import { ActivateRoute } from '@angular/router'; public data: any; export class ExampledetailComponent implements OnInit { constructor( public route: ActivateRoute ) { }; ngOnInit(){ this.data = this.route.snapshot.params['id']; }; }queryParams
import { ActivateRoute } from '@angular/router'; export class ExampledetailComponent implements OnInit { public data: any; constructor( public activeRoute:ActivateRoute ) { }; ngOnInit(){ this.activeRoute.queryParams.subscribe(params => { this.data = params['name']; }); };
서비스를 사용하여 통신합니다. 즉, 두 구성 요소가 동시에 서비스를 주입합니다
시나리오: 통신해야 하는 두 구성 요소는 상위-하위 구성 요소나 인접 구성 요소가 아니며 임의의 구성 요소일 수도 있습니다. 단계:새 서비스를 생성하면 구성 요소 A와 구성 요소 B가 동시에 서비스에 삽입됩니다.
구성 요소 A는 서비스에서 데이터를 얻거나 서비스로 데이터를 전송하려고 합니다.
구성 요소 B는 서비스에서 데이터를 얻습니다. 서비스를 제공하거나 서비스에 데이터를 전송하려고 합니다.
// 组件A @Component({ selector: 'app-a', template: '', styles: [``] }) export class AppComponentA implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 组件A发送消息3 this.message.sendMessage(3); const b = this.message.getMessage(); // 组件A接收消息; } } // 组件B @Component({ selector: 'app-b', template: ` <app-a></app-a> `, styles: [``] }) export class AppComponentB implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 组件B获得消息 const a = this.message.getMessage(); this.message.sendMessage(5); // 组件B发送消息 } }
메시지 서비스 모듈
RxJ를 사용하여 서비스 모듈 MessageService를 정의하면 모든 정보가 서비스에 등록됩니다.
메시지를 보내야 하는 경우 서비스 메서드를 호출하세요.
정보를 받아야 하는 경우 사용하세요. 정보를 수신하고 구독 개체를 얻은 다음 정보를 듣습니다.
물론 각 구성 요소가 Destory인 경우
this.subscription.unsubscribe();가 필요합니다. 코드:
// 消息中专服务 @Injectable() export class MessageService { private subject = new Subject<any>(); /** * content模块里面进行信息传输,类似广播 * @param type 发送的信息类型 * 1-你的信息 * 2-你的信息 * 3-你的信息 * 4-你的信息 * 5-你的信息 */ sendMessage(type: number) { console.log('TAG' + '---------->>>' + type); this.subject.next({type: type}); } /** * 清理消息 */ clearMessage() { this.subject.next(); } /** * 获得消息 * @returns {Observable<any>} 返回消息监听 */ getMessage(): Observable<any> { return this.subject.asObservable(); } } // 使用该服务的地方,需要注册MessageService服务; constructor(private message: MessageService) { } // 消息接受的地方; public subscription: Subscription; ngAfterViewInit(): void { this.subscription = this.message.getMessage().subscribe(msg => { // 根据msg,来处理你的业务逻辑。 }) } // 组件生命周期结束的时候,记得注销一下,不然会卡; ngOnDestroy(): void { this.subscription.unsubscribe(); } // 调用该服务的方法,发送信息; send():void { this.message.sendMessage(‘我发消息了,你们接受下'); // 发送信息消息 }
문자열
또는 개체 등을 전송할 수 있으며 여기의 전파 속도도 매우 빠릅니다.잘못된 태그 selected="selected" 속성을 처리하는 방법
위 내용은 Angular 구성요소 간의 값 전달 및 통신에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!