Angular 구성요소 간의 값 전달 및 통신에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 Angular 컴포넌트 간의 값 전달 및 통신 사용에 대해 자세히 설명하겠습니다. Angular 컴포넌트 간의 값 전달 및 통신에 대한 주의 사항은 무엇입니까?

이 글에서는 주로 Angular가 값을 전달하고 다양한 구성 요소에서 통신하는 방법을 소개합니다. 크게 부모-자식 구성요소와 비부모-자식 구성요소로 구분됩니다.

상위 구성요소와 하위 구성요소 간의 매개변수 및 통신 방법

이벤트 통신 사용(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 사용:

시나리오: 일반적으로 상위 구성 요소가 하위 구성 요소에 정보를 전달하거나 상위 구성 요소가 하위 구성 요소의 메서드를 호출하는 데 사용됩니다. 단계:

상위 구성 요소에서 하위 구성 요소를 사용하세요

상위 구성 요소에서 @ViewChild를 사용하여 하위 구성 요소 개체를 가져옵니다.
상위 구성 요소는 하위 구성 요소 개체를 사용하여 하위 구성 요소를 제어합니다(정보 전달 또는 메서드 호출).

코드:

// 子组件
@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는 이러한 매개 변수를 허용합니다

이 방법은 매개변수 전송에만 적합합니다. 구성요소 간 매개변수가 수신되면 변경되지 않습니다
코드
배송방법

routerLink

<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(‘我发消息了，你们接受下'); // 发送信息消息
   }

로그인 후 복사