Detaillierte Beispiele für Wertübertragungs- und Kommunikationsmethoden zwischen verschiedenen Komponenten in Angular

In diesem Artikel werden hauptsächlich die Methoden der Wertübertragung und Kommunikation zwischen verschiedenen Komponenten in Angular vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In diesem Artikel wird hauptsächlich vorgestellt, wie Angular Werte überträgt und in verschiedenen Komponenten kommuniziert. Es ist hauptsächlich in Eltern-Kind-Komponenten und Nicht-Eltern-Kind-Komponenten unterteilt.

Parameter und Kommunikationsmethoden zwischen übergeordneten und untergeordneten Komponenten

Verwenden Sie die Ereigniskommunikation (EventEmitter, @Output):

Szenario : Ja Zur Kommunikation zwischen übergeordneten und untergeordneten Komponenten wird im Allgemeinen die untergeordnete Komponente verwendet, um Nachrichten an die übergeordnete Komponente weiterzuleiten.

Schritte:

1. Die untergeordnete Komponente erstellt ein Ereignis EventEmitter-Objekt und verwendet @output, um es verfügbar zu machen.

2. Die übergeordnete Komponente lauscht auf die @output-Methode der untergeordneten Komponente und verarbeitet dann das Ereignis.

Code:

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

Verwendung von @ViewChild und @ViewChildren:

Szenario: Wird im Allgemeinen für übergeordnete Komponenten verwendet, um Informationen an Unterkomponenten weiterzuleiten, oder für übergeordnete Komponenten, um Methoden von Unterkomponenten aufzurufen.

Schritte:

1. Unter verwenden -Komponenten in übergeordneten Komponenten;

2. Verwenden Sie @ViewChild in der übergeordneten Komponente, um das untergeordnete Komponentenobjekt abzurufen.

3. Die übergeordnete Komponente verwendet das untergeordnete Komponentenobjekt, um die untergeordnete Komponente zu manipulieren (Informationen weiterzugeben oder Methoden aufzurufen).

Code:

// 子组件
@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);// 父组件获得子组件属性
 }
}

Parameterübergabe und Kommunikationsmethode für Nicht-Eltern-Kind-Komponenten

Durch Routing-Parameter

Szenario: Eine Komponente kann durch Routing zu einer anderen Komponente springen, z. B.: Auflisten und Bearbeiten

Schritte:

1. Komponente A springt über routerLink oder router.navigate oder router.navigateByUrl zu Komponente B

2. Komponente B akzeptiert diese Parameter

Diese Methode ist nur für die Parameterübergabe geeignet. Sobald die Parameter zwischen Komponenten empfangen werden, ändern sie sich nicht.

Code

Übertragungsmethode

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

Nachdem die Parameterübertragungspartei die Parameter übergeben hat, stehen dem Empfänger zwei Empfangsmethoden zur Verfügung:

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

Verwenden Sie den Service Service zur Kommunikation, das heißt: Zwei Komponenten injizieren gleichzeitig einen Service

Szenario: zwei Komponenten, die kommunizieren müssen Es handelt sich natürlich nicht um eine Eltern-Kind-Komponente oder eine benachbarte Komponente, es kann auch eine beliebige Komponente sein.

Schritte:

1. Erstellen Sie einen neuen Dienst, und Komponente A und Komponente B injizieren den Dienst gleichzeitig

2. Komponente A startet vom Dienst Daten abrufen oder Daten an den Dienst übertragen

3. Komponente B erhält Daten vom Dienst oder möchte Daten an den Dienst übertragen.

Code:

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

Nachrichtendienstmodul

Szenario: hier Wenn es um ein Projekt geht, muss die Möglichkeit der Kommunikation zwischen allen Komponenten implementiert werden, oder eine Komponente muss mit mehreren Komponenten kommunizieren und Parameter können nicht durch Routing übergeben werden.

Entwurfsmethode:

1. Verwenden Sie RxJs, um ein Dienstmodul MessageService zu definieren, und alle Informationen werden beim Dienst registriert;

2. Wenn Sie eine Nachricht senden müssen, rufen Sie die Methode des Dienstes auf.

3. Verwenden Sie diese Option, wenn Sie Informationen empfangen möchten, rufen Sie die Methode zum Empfangen der Informationen auf, rufen Sie ein Abonnementobjekt ab und dann achten Sie auf die Informationen;

4. Natürlich, wenn Sie jede Komponente zerstören,

this.subscription.unsubscribe();

Code:

  // 消息中专服务
  @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;); // 发送信息消息
   }

Der MessageService entspricht hier der Verwendung des Broadcast-Mechanismus, um Informationen zwischen allen Komponenten zu übertragen; es ist übertragbar und auch hier ist die Ausbreitungsgeschwindigkeit sehr hoch.

Verwandte Empfehlungen:

Ein Beispiel dafür, wie Express Get- und Post-Werte und Sitzungsüberprüfung in NodeJS erhält

Gemeinschaft von zwei Methoden zur dynamischen Übergabe von Werten von übergeordneten Vue-Komponenten an untergeordnete Komponenten

Detaillierte Erläuterung der Verwendung von fetch und des Empfangs von JS-übergebenen Werten