Angular v1 Komponente zu Komponente Datenübertragung

Question

Ich habe Probleme mit Angular v1.6.1, wo ich versuche, einige Daten von einer Komponente zu einer anderen Komponente zu übertragen.

---

Ich habe eine Komponente navbar genannt, die in app\common\navbar residiert einen Controller hat, die Daten von einem Dienst abruft. Die folgenden Dateien bilden navbar Komponente

navbar.component.js

import controller from './navbar.controller'; 
import template from './navbar.html'; 
export default navbarComponent = { 
    restrict: 'E', 
    bindings: {}, 
    template, 
    controller 
}; 

navbar.controller.js

class NavbarController { 
    constructor(httpService) { 
    const dataUrl = "/assets/data/header.json"; 
    this.name = 'Navbar'; 
    this.headerData = {}; 
    console.log("In "+this.name); 
    httpService.getData(dataUrl) 
     .then((response) => { 
      angular.extend(this.headerData,response.data); 
     },(error) => { throw error; }); 
    } 
} 
export default NavbarController; 

navbar.html

<section> 
    <top-header top-data="$ctrl.headerData"></top-header> 
<section> 

---

und mein httpService befindet sich in app\services Ordner. Es holt Inhalt axios http Bibliothek und sieht so etwas wie dieses

httpService.js

import axios from 'axios'; 
export class HttpService { 
    constructor() { 
     this.name = "HttpService"; 
    } 
    getData(api_url){ 
     return axios.get(api_url) 
     .then((response) => response, (error) => error); 
    } 
} 

---

Die Komponente, die meine navbar-Komponente verwendet die headerdata ist Top-Header und befindet sich in app\common\top-header. Das ist, was es enthält

Top-header.component.js

import template from './top-header.html'; 
import controller from './top-header.controller'; 

export default topHeaderComponent = { 
    restrict: 'E', 
    template, 
    bindings: { 
     topData: '<' 
    }, 
    controller, 
}; 

Top-header.controller.js

class TopHeaderController { 
    constructor() { 
    this.name = 'TopHeader'; 
    this.topHeaderData = {}; 
    this.$onInit = function() { 
     this.topHeaderData = this.topData; 
     console.log(this.topHeaderData); 
     console.log(this.topHeaderData.telephoneNumber); 
     console.log(this.topHeaderData); 
    } 
    } 
} 
export default TopHeaderController; 

Top-header.html

{{$ctrl.topHeaderData.telephoneNumber}} 

---

und schließlich wohnt meine statische Dateien in assets\data und die JSON Ich versuche header.json enthält

{ 
    "telephoneNumber": 12345678 
} 

---

So das Problem

header.json zu holen Jetzt sehe ich, dass die Daten in meiner Top-Header-Komponente angezeigt werden, aber ich bin mir nicht sicher, was passiert, aber die Daten verschwinden (kommt undefined), sobald ich versuche Greifen Sie auf die Objekteigenschaft zu.

Was ich sage ist, dass in top-header.controller.js wenn ich console.log(this.topHeaderData); es das Objekt zeigt, aber wenn ich zu console.log(this.topHeaderData.telephoneNumber); versuchen kommt es bis undefined

Ich denke, das Problem aufgrund der Ausführungspriorität der Richtlinien besteht. Ich habe sogar navbar Komponente Priorität auf 5 gesetzt und es hat nicht geholfen, da die Daten nicht definiert sind.

Top-header.controller.js

this.$onInit = function() { 
    this.topHeaderData = this.topData; 
    console.log(this.topHeaderData); // shows topData 
    console.log(this.topHeaderData.telephoneNumber); // undefined 
    console.log(this.topHeaderData); // shows topData 
} 

Diese Daten this.topHeaderData.telephoneNumber ist wichtig, da ich dies in meiner Vorlage verwenden.

Wie kann ich dieses Problem beheben? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Das Problem in top-header.controller.js sein kann: Sie topData-this.topheaderData in $onInit Haken binded sind Zuweisen aber, wenn die Komponente der Daten initialisiert werden noch nicht abgeholt worden. Statt $onInit sollten Sie $onChange Hook-Methode verwenden, die durch Schräg aufgerufen wird, wenn binded Eigenschaft aktualisiert wird (in Ihrem Fall, wenn Daten vom Server abgerufen werden)

Angular Komponente docs:

$ onChanges (changesObj) - Wird aufgerufen, wenn unidirektionale Bindungen aktualisiert werden. Das changesObj ist ein Hash, dessen Schlüssel die Namen der gebundenen Eigenschaften sind, die geändert wurden, und die Werte sind ein Objekt der Form {currentValue, previousValue, isFirstChange()}. Verwenden Sie diesen Hook, um Updates innerhalb einer Komponente auszulösen, z. B. das Klonen des gebundenen Werts auf , um eine versehentliche Mutation des äußeren Werts zu verhindern.