Zugriff auf den Parent-Bereich vom Child-Controller in Angular

Wir werden vorstellen, wie Sie vom untergeordneten Controller in Angular auf den übergeordneten Bereich zugreifen.

Zugriff auf den Parent-Scope vom Child-Controller in Angular

Wenn wir an einer komponentenbasierten Bibliothek oder einem Framework arbeiten, gibt es viele Szenarien, in denen wir Daten zwischen zwei Komponenten austauschen müssen.

Zuerst erstellen wir eine users-Komponente.

# angular CLI
ng g c users

Der obige Befehl generiert eine neue Komponente Benutzer.

Wir können sehen, dass es im App-Ordner einen neuen Benutzerordner geben wird. Um unsere Komponente users anzuzeigen, müssen wir den in user.component.ts gesetzten users selector verwenden.

Lassen Sie uns also die Komponente users innerhalb der Komponente app anzeigen. Zuerst müssen wir die UsersComponent in declarations der app.module.ts hinzufügen.

Die app.module.ts sieht also wie folgt aus.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { UsersComponent } from './users/users.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, UsersComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Wir müssen ein Tag mit Benutzerauswahl in app.component.html erstellen, und es zeigt alles an, was wir in users.component.html hinzugefügt haben. Unser Code in der app.component.html sieht wie folgt aus.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users></app-users>

Ausgabe:

Wie auf dem Bild zu sehen, hat das Tag app-users users works! angezeigt. weil wir in users.component.html den folgenden Code haben.

# angular
<p>users works!</p>

Konvertieren wir es in eine Überschrift und senden Sie Daten von der übergeordneten Komponente.

Zuerst ändern wir unser <p>-Tag in <h3>.

# angular
<h3>Child Component</h3>

Ausgabe:

Wir senden einfache Daten von der übergeordneten Komponente an die untergeordnete Komponente. Wir werden eine Variable in der Datei app.component.ts definieren, also wird unser Code unten sein.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  data = "User Name"
}

Wie im Code zu sehen ist, haben wir Benutzername``Daten zugewiesen; Lassen Sie uns diese Daten an die untergeordnete Komponente senden. Die app.component.html sieht also wie folgt aus.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users [data] = "data"></app-users>

Durch die Bindung von [data] an die Variable data senden wir der Kindkomponente die Daten, sie sind aber noch nicht vollständig gebunden.

Wir müssen die Input in die Datei users.component.ts importieren. Input ist ein Decorator, der die Daten liest, die wir an unsere untergeordnete Komponente gesendet haben, und sie in der untergeordneten Komponente anzeigt.

In unserer UsersComponent-Klasse lesen wir die Eigenschaft, die wir in app.component.html innerhalb des app-users-Tags gebunden haben. Unser Code in users.component.ts sieht also wie folgt aus.

# angular
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  @Input() data
  constructor() { }

  ngOnInit() {
  }
}

Wie im Code zu sehen, haben wir @Input() data verwendet, um die [data] aus dem app-users-Tag in der app.component.html zu binden. Wir zeigen die Daten, die wir erhalten haben, in der Datei users.component.html an.

# angular
<h3>Child Component</h3>
<h4>Data Recieved:</h4>
<p>{{data}}</p>

Ausgabe:

Wir haben Daten von der übergeordneten Komponente zur untergeordneten Komponente erhalten. Wir werden nun besprechen, wie ein Objekt von Eltern zu Kind geteilt wird.

Versuchen wir, ein Objekt zu teilen, indem wir die von uns gesendeten Daten ändern.

# angular
data = {
    name: 'Rana Hasnain',
    age: 25
  }

Ausgabe:

Wir können sehen, dass wir das [object Object] anstelle von Daten von diesem Objekt anzeigen. Was wir jetzt tun müssen, ist unseren Code in der Datei users.component.html zu modifizieren und {{data}} in {{data.name}} oder {{data.age}} zu ändern, und es zeigt das Objekt an.

# angular
<h3>Child Component</h3>
<h4>Data Received:</h4>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>

Ausgabe:

Jetzt können wir also sehen, dass wir Daten und Objekte von übergeordneten zu untergeordneten Komponenten geteilt haben.