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

使用我的navbar组件的headerData的组件是 top-header 并位于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中，而我正在尝试获取 header.json 的JSON包含

header.json

{
    "telephoneNumber": 12345678
}

所以我现在看到的问题是数据确实显示在我的top-header组件中，但是我不确定发生了什么，但是一旦我尝试访问对象，数据就会消失（出现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但是当初始化组件时，数据没有＆＃39}。还没得到。您应该使用$onInit挂钩方法而不是$onChange，当绑定属性更新时（在您从服务器获取数据的情况下）由Angular调用

Angular组件文档：

$ onChanges（changesObj） - 每当更新单向绑定时调用。 changesObj是一个哈希，其键是绑定的名称已更改的属性，值是表单的对象 {currentValue，previousValue，isFirstChange（）}。使用此钩子触发组件内的更新，例如克隆绑定值防止外部价值的意外突变。

Angular v1组件到组件数据传输

1 个答案: