이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
