이 글은 주로 Angular의 다양한 컴포넌트 간의 가치 전달 및 통신 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
상위 구성요소와 하위 구성요소 간의 매개변수 및 통신 방법
이벤트 통신 사용(EventEmitter, @Output):
시나리오: 상위 구성요소와 하위 구성요소 간의 통신은 일반적으로 하위 구성요소를 사용하여 수행됩니다.
단계:
하위 구성 요소는 이벤트 EventEmitter 객체를 생성하고 @output을 사용하여 노출합니다.
상위 구성 요소는 하위 구성 요소 @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);// 父组件获得子组件属性 } }
라우팅 매개 변수를 통해
시나리오: 하나의 구성 요소는 다음과 같은 라우팅을 통해 다른 구성 요소로 점프할 수 있습니다. 및 편집
단계:
Code
전송 방법
routerLink
<a routerLink=["/exampledetail",id]></a> routerLink=["/exampledetail",{queryParams:object}] routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];
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 @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를 정의하면 모든 정보가 서비스에 등록됩니다.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(‘我发消息了,你们接受下'); // 发送信息消息 }
vue에서 페이지 역방향 값 전송의 간단한 구현 방법 공유
PHP에서 세션 및 쿠키 데이터 값 전송 기능 구현
위 내용은 Angular의 서로 다른 구성 요소 간 가치 전달 및 통신 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!