Angularjs 角度v1组件到组件的数据传输

我正在努力解决Angular v1.6.1中的一个问题，我试图将一些数据从一个组件传输到另一个组件

---

我有一个名为navbar的组件，它位于

app\common\navbar

中，有一个从服务获取数据的控制器。下列文件构成了导航栏组件

navbar.component.js

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

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;

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

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

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

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;

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
}

navbar.controller.js

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

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;

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

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

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

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;

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
}

navbar.html

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

{{$ctrl.topHeaderData.telephoneNumber}}

---

使用my

navbar

组件标题数据的组件是顶部标题，位于

app\common\top header

中。这就是它包含的内容

顶部标题.component.js

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

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;

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

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

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

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;

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
}

top header.html

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

{{$ctrl.topHeaderData.telephoneNumber}}

---

最后，我的静态文件驻留在

assets\data

中，我试图获取的JSONheader.JSON包含

header.json

{
    "telephoneNumber": 12345678
}

---

因此，我现在看到的问题是，数据确实显示在我的顶部标题组件中，但我不确定发生了什么，但一旦我尝试访问对象属性，数据就会消失（出现

未定义的

）

我想说的是，在top header.controller.js中 当I

console.log（this.topHeaderData）时

它显示对象，但当我尝试

console.log（this.topHeaderData.telephoneNumber）时它出现
未定义

我认为问题的存在是因为指令的执行优先级。我甚至将
navbar
component priority设置为5，但由于数据未定义，因此没有任何帮助

顶部标题.controller.js

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

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;

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

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

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

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;

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
是我在模板中使用的基本数据

我如何解决这个问题？任何帮助都将不胜感激。
问题可能出在
顶部header.controller.js
中：您正在
$onInit
钩子中将绑定的
topData
分配给
此.topheaderData
，但当组件初始化时，数据尚未被提取。您应该使用
$onInit
钩子方法，而不是
$onChange
钩子方法，该方法在更新绑定属性时由Angular调用（在从服务器获取数据的情况下）

角度组件文档：

$onChanges（changesObj）-在更新单向绑定时调用。
changesObj是一个散列，其键是绑定的名称
属性，并且这些值是窗体的对象
{currentValue，previousValue，isFirstChange（）}。用这个钩子
在组件内触发更新，例如将绑定值克隆到
防止外部值的意外突变