Lassen Sie uns darüber sprechen, wie Sie Daten zwischen übergeordneten und untergeordneten Komponenten in Angular übertragen

Wie übertrage ich Daten zwischen übergeordneten und untergeordneten Komponenten in Angular? Der folgende Artikel stellt Ihnen die Methode vor, mit der die übergeordnete Komponente Daten an die untergeordnete Komponente und die untergeordnete Komponente an die übergeordnete Komponente in Angular weitergibt. Ich hoffe, er wird Ihnen hilfreich sein!

Umgebung:

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

Komponenten Das Wichtigste beim Übertragen von Daten zwischen übergeordneten und untergeordneten 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 Es besteht die Hoffnung, dass die übergeordnete Komponente benachrichtigt werden kann.

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. [Empfohlene verwandte Tutorials: „angular Tutorial“]

Vater-zu-Kind-@Input()

1. Unterkomponentendefinition @Input()

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

Zum Beispiel:

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

• Fügen Sie die Dekoratorvariable @Input() hinzu, mit der Ausnahme, dass Daten von der übergeordneten Komponente übergeben werden können. Die andere Logik ist dieselbe wie bei gewöhnlichen Variablen HTML-Code der Nachrichtenvariablen der Unterkomponente, zum Beispiel:

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

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 ) werden an die untergeordnete Komponente übergeben

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

In der untergeordneten Komponente kann die eingehende Variable message geändert werden, ihr Gültigkeitsbereich gilt jedoch nur im untergeordneten Element Komponente, und die übergeordnete Komponente kann das geänderte Ergebnis nicht erhalten. (Wie Sie es an die übergeordnete Komponente übergeben, lesen Sie bitte weiter)

messageToChild） 传递给子组件

export class ChildComponent {

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

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

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

子传父 @Output()

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

1. 子组件定义@Output

子组件定义@Output

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

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

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

2. 父组件订阅事件

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

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

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

rrreee

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

@Output() vom untergeordneten zum übergeordneten Element übergeben

Angular verwendet Ereignisse, um die übergeordnete Komponente über Datenänderungen zu benachrichtigen, und die übergeordnete Komponente muss das Ereignis abonnieren .

• 1. Unterkomponentendefinition @Output

• Unterkomponentendefinition @Output
rrreee

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

rrreee

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. 🎜🎜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: 🎜Programmieren lernen🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Daten zwischen übergeordneten und untergeordneten Komponenten in Angular übertragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!