Angular의 서로 다른 구성 요소 간 가치 전달 및 통신 방법 공유

이 글은 주로 Angular의 다양한 컴포넌트 간의 가치 전달 및 통신 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

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

시나리오: 상위 구성요소와 하위 구성요소 간의 통신은 일반적으로 하위 구성요소를 사용하여 수행됩니다.

단계:

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

2. 상위 구성 요소는 하위 구성 요소 @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: &#39;app-parent&#39;,
   template: `
    <app-child (onVoted)="onListen($event)"></app-child>
   `,
   styles: [``]
  })
  export class AppParentComponent implements OnInit {
   ngOnInit(): void {
    throw new Error(&#39;Method not implemented.&#39;);
   }
   onListen(data: any): void {
    console.log(&#39;TAG&#39; + &#39;---------->>>&#39; + 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(&#39;TAG&#39;+&#39;---------->>>&#39;+this.child.data);// 父组件获得子组件属性
 }
}

부모-자식이 아닌 구성 요소 매개 변수 전달 및 통신 방법

라우팅 매개 변수를 통해

시나리오: 하나의 구성 요소는 다음과 같은 라우팅을 통해 다른 구성 요소로 점프할 수 있습니다. 및 편집

단계:

A 구성 요소는 routerLink 또는 router.navigate 또는 router.navigateByUrl을 통해 B 구성 요소로 점프합니다.
B 구성 요소는 이러한 매개 변수를 허용합니다.
이 방법은 매개 변수 전달에만 적용됩니다. 매개변수는 일단 수신되면 변경되지 않습니다

Code

전송 방법

routerLink

<a routerLink=["/exampledetail",id]></a>

routerLink=["/exampledetail",{queryParams:object}]

routerLink=["/exampledetail",{queryParams:&#39;id&#39;:&#39;1&#39;,&#39;name&#39;:&#39;yxman&#39;}];

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'}});

매개변수를 전달한 후 두 가지 수신 방법은 다음과 같습니다.

snapshot

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가 동시에 서비스에 삽입됩니다.

1. 구성 요소 A는 서비스에서 데이터를 얻거나 서비스에서 데이터를 전송하기를 원합니다

2. 구성요소 B는 서비스에서 데이터를 가져오거나 서비스로 데이터를 전송하려고 합니다.

3. 코드:

  // 组件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를 정의하면 모든 정보가 서비스에 등록됩니다.

1. 메시지를 보내야 하는 경우 서비스 메서드가 호출됩니다. 정보를 받아야 합니다. 로컬에서 사용하고, 정보를 받는 메서드를 호출하고, 구독 개체를 얻은 다음, 정보를 모니터링합니다.

2. 물론, 각 구성 요소가 삭제되면

4. 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(&#39;TAG&#39; + &#39;---------->>>&#39; + 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(‘我发消息了，你们接受下&#39;); // 发送信息消息
   }

여기서 MessageService는 브로드캐스트 메커니즘을 사용하여 모든 구성 요소 간에 정보를 전송하는 것과 같습니다. 숫자, 문자열, 개체 등 정보를 전송할 수 있으며 여기의 전파 속도도 매우 빠릅니다.

관련 추천:

vue에서 페이지 역방향 값 전송의 간단한 구현 방법 공유

PHP에서 세션 및 쿠키 데이터 값 전송 기능 구현

PHP에서 값 전송 방법 소개

위 내용은 Angular의 서로 다른 구성 요소 간 가치 전달 및 통신 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!