Угловой v1 Компонент передачи данных компонентов

Question

Я борюсь с проблемой в Angular v1.6.1, где я пытаюсь передать некоторые данные из компонента в другой компонент.

---

У меня есть компонент, называемый Navbar, который проживает в app\common\navbar имеет контроллер, который извлекает данные из службы. Следующие файлы составляют 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> 

---

и мой httpService находится в app\services папке. Он извлекает содержимое с помощью библиотеки axios HTTP и выглядит как этот

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); 
    } 
} 

---

Компонент, который использует headerData моего navbar компонента является верхним заголовком и находится в app\common\top-header. Это то, что она содержит

топ-header.component.js

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

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

топ-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; 

топ-header.html

{{$ctrl.topHeaderData.telephoneNumber}} 

---

и, наконец, мои статические файлы находится в assets\data и JSON Я пытаюсь принести header.json содержит

header.json

{ 
    "telephoneNumber": 12345678 
} 

---

Таким образом, проблема теперь я вижу, что данные отображаются в моем компоненте верхнего заголовка, но я не уверен, что происходит, но данные исчезают (появляется undefined), как только я пытаюсь доступ к объекту.

То, что я говорю, это то, что в top-header.controller.JS когда я console.log(this.topHeaderData); он показывает объект, но когда я пытаюсь console.log(this.topHeaderData.telephoneNumber); он приходит undefined

Я думаю, что проблема существует из-за приоритет выполнения директив. Я даже установил navbar приоритет компонента на 5, и это не помогло, так как данные не определены.

топ-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 
} 

Эти данные this.topHeaderData.telephoneNumber имеет важное значение, как я использую это в моем шаблоне.

Как решить эту проблему? Любая помощь будет принята с благодарностью.

Answer 1

Проблема может быть в top-header.controller.js: вы присваиваете переплетены topData к this.topheaderData в $onInit крюком, но когда компонент инициализации данных еще не принесла. Вместо $onInit вы должны использовать $onChange метод крюк, который называется угловым, когда переплетены свойство обновляется (в вашем случае, когда данные извлекаются с сервера)

Угловые документы компонентов:

$ onChanges (changesObj) - Вызывается каждый раз, когда обновляются односторонние привязки. ИзмененияObj - это хеш, ключи которого являются именами связанных свойств, которые были изменены, и значения являются объектами формы {currentValue, previousValue, isFirstChange()}. Используйте этот крючок для обновлений триггеров в компоненте, таком как клонирование связанного значения до , чтобы предотвратить случайную мутацию внешнего значения.