Detaillierte Erläuterung der Wertübertragung und Kommunikation zwischen Winkelkomponenten

Dieses Mal werde ich Ihnen die Verwendung der Wertübertragung und Kommunikation zwischen Winkelkomponenten ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Wertübertragung und Kommunikation zwischen Winkelkomponenten? Werfen wir einen Blick darauf.

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

Ereigniskommunikation verwenden (EventEmitter, @Output):

Szenario: Die Kommunikation kann zwischen übergeordneten und untergeordneten Komponenten erfolgen und wird im Allgemeinen in untergeordneten Komponenten verwendet, um Nachrichten an übergeordnete Komponenten weiterzuleiten Schritte:

Die untergeordnete Komponente erstellt ein EventEmitter-Ereignisobjekt und stellt es mithilfe von @output bereit.

1. Die übergeordnete Komponente lauscht auf die Methode der untergeordneten Komponente @output 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: '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);
   }
  }

Verwenden Sie @ViewChild und @ViewChildren:

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

Verwenden Sie die untergeordnete Komponente

1. in der übergeordneten Komponente, um das untergeordnete Komponentenobjekt mithilfe von @ViewChild abzurufen.

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

3. Code:

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

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

Übergeben Sie Routing-Parameter

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

Komponente A verwendet routerLink oder router.navigate oder router.navigateByUrl, um zu Komponente B zu springen

1. Komponente B akzeptiert diese Parameter

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

Code

Versandart

routerLink

router.navigate

<a routerLink=["/exampledetail",id]></a>
routerLink=["/exampledetail",{queryParams:object}]
routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];

router.navigateByUrl

this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});

Nachdem der Parametersender die Parameter übergeben hat, verfügt der Empfänger über zwei Empfangsmethoden:

Schnappschuss

this.router.navigateByUrl('/exampledetail/id');
this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});

queryParams

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

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

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

Szenario: Die beiden Komponenten, die kommunizieren müssen, sind natürlich keine übergeordneten und untergeordneten Komponenten, sondern können auch beliebige Komponenten sein. Schritte:

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

1. Komponente A erhält Daten vom Dienst oder möchte, dass der Dienst Daten überträgt

2. Komponente B erhält Daten vom Dienst. Der Dienst erhält Daten oder möchte, dass der Dienst Daten überträgt.

3. Code:

Nachrichtendienstmodul

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

Szenario: Hierbei handelt es sich um ein Projekt, bei dem alle Komponenten kommunizieren können müssen oder eine Komponente mit mehreren Komponenten kommunizieren muss und Parameter nicht per Routing übergeben werden können. Entwurfsmethode:

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

1. Wenn eine Nachricht gesendet werden muss, rufen Sie die Methode des Dienstes auf; >

   Wird dort verwendet, wo Informationen empfangen werden müssen. Rufen Sie die Methode zum Empfangen von Informationen auf, rufen Sie ein Abonnementobjekt ab und überwachen Sie dann die Informationen.

2. Natürlich, wenn jede Komponente zerstört wird ,

3. Code:

4. Der MessageService entspricht hier der Verwendung des Broadcast-Mechanismus zur Übertragung von Informationen zwischen allen Komponenten, unabhängig davon, ob es sich um eine Zahl, eine

   Zeichenfolge
oder ein Objekt handelt , und auch hier erfolgt die Ausbreitung sehr schnell.

this.subscription.unsubscribe();

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Detaillierte Erläuterung der Schritte der js-Kapselungsoperationsklasse

Wie man mit dem ungültigen Tag selected="selected"-Attribut umgeht

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Wertübertragung und Kommunikation zwischen Winkelkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!