Eine kurze Diskussion zum Übertragen von Daten zwischen übergeordneten und untergeordneten Komponenten in Angular

In diesem Artikel wird Ihnen die Methode zum Übertragen von Daten zwischen übergeordneten und untergeordneten Komponenten in Angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual. Studio Code

1. Zusammenfassung

Das Wichtigste beim Übertragen von Daten zwischen Komponenten ist die Übertragung von Daten zwischen übergeordneten und untergeordneten Komponenten. Zum Beispiel:

<parent-component>
  <child-component></child-component>
</parent-component>

Die übergeordnete Komponente übergibt gleichzeitig Daten an die untergeordnete Komponente Bei Datenänderungen hoffen wir, die übergeordneten Komponenten benachrichtigen zu können.

In Angular bieten @Input() und @Output() eine Möglichkeit für untergeordnete Komponenten, mit ihren übergeordneten Komponenten zu kommunizieren. @Input() ermöglicht es übergeordneten Komponenten, Daten in untergeordneten Komponenten zu aktualisieren. Im Gegensatz dazu ermöglicht @Output() untergeordneten Komponenten, Daten an übergeordnete Komponenten zu senden. [Verwandte Tutorials empfohlen: „Angular Tutorial“]

2. Parent-to-Child @Input()

2.1. Unterkomponentendefinition @Input()

@Input() in der Unterkomponente Der Dekorator gibt an, dass die Eigenschaft ihren Wert von ihrer übergeordneten Komponente erhalten kann.

Zum Beispiel:

rrree

1. Fügen Sie die Variablen des @Input()-Dekorators hinzu, außer dass Daten von der übergeordneten Komponente übergeben werden können.

2 im HTML-Code der untergeordneten Komponente. Beispiel:

export class ChildComponent {
  @Input() message: string;
}

2.2. Die übergeordnete Komponente übergibt Variablen an die untergeordnete Komponente.

Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, können Sie die Variablen der übergeordneten Komponente übergeben Variablen (z. B. messageToChild) In der Unterkomponente

<p>
  Parent says: {{message}}
</p>

messageToChild） 传递给子组件

<child-component [message]="messageToChild"></child-component>

子组件中，可以更改message这个传入的变量，但是其作用域只在子组件中，父组件拿不到更改后的结果。（如何传给父组件，请接着看）

3. 子传父 @Output()

Angular通过事件（Event）来实现子组件通知父组件数据的改变，父组件需要订阅该事件。

3.1. 子组件定义@Output

子组件定义@Output

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

子组件当数据发生变化时，调用这个addNewItem方法既可。例如，html中

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>

3.2. 父组件订阅事件

1、父组件的ts代码中，增加一个处理上面事件的方法，例如

addItem(newItem: string) {
    // logic here
}

2、父组件的html中，订阅该事件。

<child-component (newItemEvent)="addItem($event)"></child-component>

事件绑定 (newItemEvent)='addItem($event)'

können Sie die übergebene Variable message ändern, ihr Gültigkeitsbereich liegt jedoch nur in der Unterkomponente. und die übergeordnete Komponente kann das geänderte Ergebnis nicht erhalten. (Wie man es an die übergeordnete Komponente weitergibt, lesen Sie bitte weiter)

3. Untergeordnete Komponente an übergeordnete Komponente @Output()

• Angular verwendet Ereignisse, um die übergeordnete Komponente über Datenänderungen zu informieren Ereignis. .

• 3.1. Unterkomponentendefinition @Output

Unterkomponentendefinition @OutputrrreeeUnterkomponente Wenn sich die Daten ändern, rufen Sie einfach diese addNewItem-Methode auf. Zum Beispiel in HTML

rrreee🎜🎜🎜3.2. Die übergeordnete Komponente abonniert das Ereignis 🎜🎜🎜🎜1. Fügen Sie im TS-Code der übergeordneten Komponente eine Methode zur Behandlung des oben genannten Ereignisses hinzu, z. Abonnieren Sie im HTML der übergeordneten Komponente das Ereignisereignis. 🎜rrreee🎜Event-Bindung (newItemEvent)='addItem($event)' verbindet das newItemEvent-Ereignis in der untergeordneten Komponente mit der addItem()-Methode der übergeordneten Komponente. 🎜🎜🎜4. Zusammenfassung🎜🎜🎜🎜🎜Mit @Input() und @Output() kann die Datenübertragung und -freigabe zwischen übergeordneten und untergeordneten Komponenten problemlos realisiert werden. 🎜🎜🎜🎜Sie können @Input() und @Output() gleichzeitig verwenden🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Übertragen von Daten zwischen übergeordneten und untergeordneten Komponenten in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!