Angular 구성요소 간의 값 전달 및 통신에 대한 자세한 설명

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

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

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

이벤트 통신 사용(EventEmitter, @Output):

시나리오: 상위 구성 요소와 하위 구성 요소 간에 통신이 수행될 수 있으며 일반적으로 하위 구성 요소에서 상위 구성 요소에 메시지를 전달하는 데 사용됩니다. 단계:

하위 구성 요소는 이벤트 EventEmitter 객체를 생성하고 @output을 사용하여 이를 노출합니다.

1. 상위 구성 요소는 하위 구성 요소 @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></app-child>
   `,
   styles: [``]
  })
  export class AppParentComponent implements OnInit {
   ngOnInit(): void {
    throw new Error('Method not implemented.');
   }
   onListen(data: any): void {
    console.log('TAG' + '---------->>>' + data);
   }
  }</any>

@ViewChild 및 @ViewChildren 사용:

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

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

1. 상위 구성 요소에서 @ViewChild를 사용하여 하위 구성 요소 개체를 가져옵니다.

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

3. 코드:

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

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

routerLink

<a></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는 서비스에서 데이터를 얻거나 서비스로 데이터를 전송하려고 합니다.

1. 구성 요소 B는 서비스에서 데이터를 얻습니다. 서비스를 제공하거나 서비스에 데이터를 전송하려고 합니다.

2. 코드:

  // 组件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发送消息
   }
  }

3. 메시지 서비스 모듈

시나리오: 여기에는 모든 구성요소가 통신할 수 있어야 하거나 하나의 구성요소가 여러 구성요소와 통신해야 하고 매개변수가 라우팅을 통해 전달될 수 없는 프로젝트가 포함됩니다.

디자인 방법:

RxJ를 사용하여 서비스 모듈 MessageService를 정의하면 모든 정보가 서비스에 등록됩니다.

메시지를 보내야 하는 경우 서비스 메서드를 호출하세요.

1. 정보를 받아야 하는 경우 사용하세요. 정보를 수신하고 구독 개체를 얻은 다음 정보를 듣습니다.

2. 물론 각 구성 요소가 Destory인 경우

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

4. 여기서 MessageService는 브로드캐스트 메커니즘을 사용하여 모든 구성 요소 간에 정보를 전송하는 것과 동일합니다. 숫자,

   문자열

   또는 개체 등을 전송할 수 있으며 여기의 전파 속도도 매우 빠릅니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 캡슐화 작업 클래스의 단계에 대한 자세한 설명

잘못된 태그 selected="selected" 속성을 처리하는 방법

위 내용은 Angular 구성요소 간의 값 전달 및 통신에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!