Wie interagieren Angular-Komponenten miteinander? Einführung in gängige Interaktionsmethoden

Die Interaktion zwischen Komponenten erfolgt hauptsächlich zwischen Master- und Slave-Komponenten. Wie interagieren also Angular-Komponenten miteinander? Der folgende Artikel stellt Ihnen die gängigen Interaktionsmethoden zwischen Angular-Komponenten vor.

【Verwandte Tutorial-Empfehlung: „Angular-Tutorial“】

1. Übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente durch Eingabebindung

child.component.ts

export class ChildComponent implements OnInit {
  @Input() hero: any;
  @Input('master') masterName: string;      // 第二个 @Input 为子组件的属性名 masterName 指定一个别名 master

  constructor() { }

  ngOnInit(): void {
  }

}

child .component. html

<div style="background-color: #749f84">
  <p>child works!</p>
  <h3>{{hero?.name}} says:</h3>
  <p>I, {{hero?.name}}, am at your service, {{masterName}}.</p>
</div>

parent.component.ts

export class ParentComponent implements OnInit {
  hero = {name: 'qxj'}
  master = 'Master'

  constructor() {
  }

  ngOnInit(): void {
  }

}

parent.component.html

<app-child [hero]="hero" [master]="master"></app-child>

2. Die übergeordnete Komponente hört auf die Ereignisse der untergeordneten Komponente

child.component.ts

export class ChildComponent implements OnInit {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }

  constructor() { }

  ngOnInit(): void {
  }

}

child.component .html

<h4>{{name}}</h4>
<button (click)="vote(true)"  [disabled]="didVote">Agree</button>
<button (click)="vote(false)" [disabled]="didVote">Disagree</button>

parent.component.ts

export class ParentComponent implements OnInit {
  agreed = 0
  disagreed = 0
  voters = ['Narco', 'Celeritas', 'Bombasto']

  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++
  }

  constructor() {
  }

  ngOnInit(): void {
  }

}

parent.component.html

<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-child *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-child>

3. Übergeordnete Komponenten und untergeordnete Komponenten interagieren über lokale Variablen

Übergeordnete Komponenten können keine Datenbindung verwenden. Lesen Sie die Eigenschaften der Unterkomponente oder rufen Sie die Methode der Unterkomponente auf. Sie können jedoch eine neue lokale Variable in der Vorlage für die übergeordnete Komponente erstellen, um die untergeordnete Komponente darzustellen, und diese Variable dann verwenden, um die Eigenschaften der untergeordneten Komponente zu lesen und die Methode der untergeordneten Komponente aufzurufen, wie im folgenden Beispiel gezeigt.

Die Unterkomponente CountdownTimerComponent zählt herunter und feuert eine Rakete ab, wenn sie Null erreicht. Die Methoden start und stop sind für die Steuerung der Uhr und die Anzeige von Countdown-Statusinformationen in der Vorlage verantwortlich. CountdownTimerComponent 进行倒计时，归零时发射一个导弹。start 和 stop 方法负责控制时钟并在模板里显示倒计时的状态信息。

child.component.ts

export class ChildComponent implements OnInit, OnDestroy {
  intervalId = 0
  message = ''
  seconds = 11

  clearTimer() {
    clearInterval(this.intervalId)
  }

  ngOnInit() {
    this.start()
  }

  ngOnDestroy() {
    this.clearTimer()
  }

  start() {
    this.countDown()
  }

  stop() {
    this.clearTimer()
    this.message = `Holding at T-${this.seconds} seconds`
  }

  private countDown() {
    this.clearTimer()
    this.intervalId = window.setInterval(() => {
      this.seconds -= 1
      if (this.seconds === 0) {
        this.message = 'Blast off!'
      } else {
        if (this.seconds < 0) {
          this.seconds = 10
        } // reset
        this.message = `T-${this.seconds} seconds and counting`
      }
    }, 1000)
  }

}

child.component.html

<p>{{message}}</p>

parent.component.ts

export class ParentComponent implements OnInit {
  constructor() {
  }
  ngOnInit(): void {
  }
}

parent.component.html

<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="child.start()">Start</button>
<button (click)="child.stop()">Stop</button>
<div class="seconds">{{child.seconds}}</div>
<app-child #child></app-child>

4、父组件调用<span style="font-size: 16px;">@ViewChild()</span>child.component.ts

import {AfterViewInit, Component, ViewChild} from '@angular/core'
import {ChildComponent} from '../child/child.component'

@Component({
  selector: 'app-parent-vc',
  template: `
    <h3>Countdown to Liftoff (via ViewChild)</h3>
    <button (click)="start()">Start</button>
    <button (click)="stop()">Stop</button>
    <div class="seconds">{{ seconds() }}</div>
    <app-child></app-child>
  `,
})
export class CountdownParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent)
  private timerComponent: ChildComponent

  seconds() {
    return 0
  }

  ngAfterViewInit() {
    // Redefine `seconds()` to get from the `ChildComponent.seconds` ...
    // but wait a tick first to avoid one-time devMode
    // unidirectional-data-flow-violation error
    setTimeout(() => {
      this.seconds = () => this.timerComponent.seconds
    }, 0)
  }

  start() {
    this.timerComponent.start()
  }

  stop() {
    this.timerComponent.stop()
  }
}

child.component.htmlrrreeeparent.component.ts

rrreee

parent.component.htmlrrreee

4. Die übergeordnete Komponente ruft @ViewChild()

auf Dies Die Methode „lokale Variable“ ist eine einfache und bequeme Methode. Es gibt jedoch auch Einschränkungen, da Verbindungen zwischen übergeordneten Komponenten und untergeordneten Komponenten alle in der Vorlage der übergeordneten Komponente hergestellt werden müssen. Der Code der übergeordneten Komponente selbst hat keinen Zugriff auf die untergeordneten Komponenten.

Wenn die Klasse der übergeordneten Komponente den Eigenschaftswert der untergeordneten Komponente lesen oder die Methode der untergeordneten Komponente aufrufen muss, kann sie die Methode „lokale Variable“ nicht verwenden.

🎜Wenn die übergeordnete Komponente 🎜Klasse🎜 diesen Zugriff benötigt, kann die untergeordnete Komponente als 🎜ViewChild🎜 verwendet und in die übergeordnete Komponente ***injiziert*** werden. 🎜🎜countdown-parent.component.ts🎜rrreee🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie interagieren Angular-Komponenten miteinander? Einführung in gängige Interaktionsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!