Je suis aux prises avec un problème dans Angular v1.6.1 où j'essaie de transférer des données d'un composant vers un autre composant.Angular v1 Transfert de données de composant à composant
I ont un composant appelé navbar qui réside dans app\common\navbar a un dispositif de commande qui récupère des données à partir d'un service. Les fichiers suivants constituent le composant navbar
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>
et mon httpService réside dans le dossier app\services. Il va chercher le contenu à l'aide axios bibliothèque http et ressemble à quelque chose comme ça
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);
}
}
Le composant qui utilise headerData de mon navbar composant est haut-tête et réside dans app\common\top-header. Voici ce qu'il contient
haut header.component.js
import template from './top-header.html';
import controller from './top-header.controller';
export default topHeaderComponent = {
restrict: 'E',
template,
bindings: {
topData: '<'
},
controller,
};
haut 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;
haut header.html
{{$ctrl.topHeaderData.telephoneNumber}}
et enfin mes fichiers statiques réside dans assets\data et JSON je suis en train de chercher header.json contient
header.json
{
"telephoneNumber": 12345678
}
Le problème maintenant je vois est que les données apparaissent dans mon composant en-tête, mais je ne suis pas sûr de ce qui se passe, mais les données disparaissent (apparaît undefined) une fois que j'essaie de accéder à la propriété de l'objet.
Ce que je veux dire, c'est que dans top-header.controller.js quand je console.log(this.topHeaderData); il montre l'objet, mais lorsque je tente de console.log(this.topHeaderData.telephoneNumber); il arrive undefined
Je pense que le problème existe en raison de la priorité d'exécution des directives. J'ai même mis navbar priorité de composant à 5 et cela n'a pas aidé car les données sont indéfinies.
haut 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
}
Ces données this.topHeaderData.telephoneNumber est essentiel que je l'utilise dans mon modèle.
Comment puis-je résoudre ce problème? Toute aide serait grandement appréciée.