コンポーネントから別のコンポーネントにデータを転送しようとしているAngular v1.6.1の問題に苦しんでいます。Angular v1コンポーネントからコンポーネントへのデータ転送
Iは、サービスからデータをフェッチコントローラを有するapp\common\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はトップヘッダで使用し、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
}
だから、問題が含まれています今すぐデータがトップヘッダーのコンポーネントに表示されますが、何が起きているのかわかりませんが、データが消える（undefined）オブジェクトプロパティにアクセスします。
私が言っているのは、top-header.controllerです。JS 私は問題は、指令の実行優先順位の存在だと思う、それはオブジェクトを示していますが、私はconsole.log(this.topHeaderData.telephoneNumber);しようとすると、それはundefined
まで来console.log(this.topHeaderData);。私はさらに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不可欠です。
この問題を解決するにはどうすればよいですか？どんな助けでも大歓迎です。