Ein Artikel, der ausführlich erklärt, wie Daten zwischen übergeordneten und untergeordneten Angular-Komponenten übertragen werden

Dieser Artikel führt Sie durch die Methode zum Übertragen von Daten zwischen übergeordneten und untergeordneten Angular-Komponenten (Komponente). Ich hoffe, dass dies der Fall ist Seien Sie allen behilflich!

环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code

Das Wichtigste beim Übergeben von Daten zwischen Komponenten ist die Weitergabe 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 Änderungen der Komponentendaten hoffe ich, benachrichtigt zu werden. Übergeordnete Komponente. 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.

Parent to child @Input()

1. Definition der untergeordneten Komponente @Input()

Der @Input()-Dekorator in der untergeordneten Komponente bedeutet, dass die Eigenschaft den Wert von ihrer übergeordneten Komponente erhalten kann . [Verwandte Tutorial-Empfehlungen: Angular-Tutorial, Programmierlehre]

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, eine andere Logik ist die

• Sie können die Nachrichtenvariable im HTML-Code der Unterkomponente verwenden, zum Beispiel:

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

2. Die übergeordnete Komponente übergibt die Variable an die untergeordnete Komponente

Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, können Sie die Variablen der übergeordneten Komponente (z. B. messageToChild) an die untergeordnete Komponente übergeben.messageToChild） 传递给子组件

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

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

子传父 @Output()

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

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>

2. 父组件订阅事件

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

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

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

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

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

In der untergeordneten Komponente können Sie die ändern eingehende Variable message, aber ihr Gültigkeitsbereich. Nur in untergeordneten Komponenten kann die übergeordnete Komponente die geänderten Ergebnisse nicht abrufen. (Wie Sie es an die übergeordnete Komponente übergeben, lesen Sie bitte weiter)

Übergabe von @Output() vom untergeordneten an das übergeordnete Element

• Angular verwendet Ereignisse, um die übergeordnete Komponente über Datenänderungen zu benachrichtigen, und die übergeordnete Komponente muss sich anmelden zur Veranstaltung.

• 1. Unterkomponentendefinition @Output

Unterkomponentendefinition @Output

rrreeeSubcomponent 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: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, der ausführlich erklärt, wie Daten zwischen übergeordneten und untergeordneten Angular-Komponenten übertragen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!