AngularJs: 如何将我的部分数据从一个组件传递到另一个组件

Question

我有一个 angular 控件，用于显示一组数据，大致如下例所示。除了一个独特的块，它还有许多重复的（但离散的）相同结构的块。

{
  "person": {
    "lastName": "Bettertester",
    "firstName": "Fester",
    "address": "Out in the woods 17",
    "zipCode": "10666",
    "place": "Back of beyond"
  },
  "contact1": {
    "firstName": "Jane",
    "lastName": "Doe",
    "phone": "555-987-654",
    "relationship": "Aunt"
  },
  "contact2": {
    "firstName": "Kherumple",
    "lastName": "Whaduffle",
    "phone": "555-666-000",
    "relationship": "Imaginary friend"
  },
  "contact3": {
    "firstName": "Kherumple",
    "lastName": "Whaduffle",
    "phone": "555-666-000",
    "relationship": "Imaginary friend"
  }
}

我已经编写了一个 angularjs 组件来检索和显示此结构，但想将重复块交给另一个组件。

angular.module('myModule').component('mainComponent', {
  templateUrl : 'person.template.html',
  controller : [ '$scope', '$http', function mainController($scope, $http) {
    var self = this;
    self.data = null;
    $http.get(url).then(function(response) {
      self.data = response.data;
    }, function(response, status) {
      console.warn("Error while loading data");
      console.warn(" - response=", response);
      console.warn(" - status=", status);
      self.data = null;
    });
  } ]
});

对应模板：

<div>
  <h1>Person information</h1>
  <table>
  <tr>
    <th class="label-column">First & last name</th>
    <td class="data">{{$ctrl.data.person.firstName}} {{$ctrl.data.person.lastName}}</td>
  </tr>
  <tr>
    <th class="label-column">Address</th>
    <td class="data">{{$ctrl.data.person.address}}</td>
  </tr>
  <tr>
    <th class="label-column">ZIP code & Place</th>
    <td class="data">{{$ctrl.data.person.zipCode}} {{$ctrl.data.person.place}}</td>
  </tr>
  </table>

  <contact details="{{$ctrl.data.contact1}}"></contact> <!-- passing the details like this sort of works -->
  <contact details="{{$ctrl.data.contact2}}"></contact>
  <contact details="$ctrl.data.contact3"></contact>     <!-- passing the details like this does not work at all -->
</div>

联系人详细信息的控制器如下所示：

angular.module('myModule').component('contact', {
  templateUrl : 'contact.template.html',
  bindings : {
    details : '@'
  },
  controller : [ '$scope', '$http', function contactController($scope, $http) {
    var self = this;
    console.log("- details=", self.details);
  } ]
});

以及对应的模板：

<div>
  <h2>Contact</h2>
  <table>
  <!-- this works -->
  <tr>
    <th class="label-column">Everything</th>
    <td class="data">{{$ctrl.details}}</td>
  </tr>
  <tr>
    <th class="label-column">First & last name</th>
    <td class="data">{{$ctrl.details.firstName}} {{$ctrl.details.lastName}}</td>
  </tr>
  <tr>
    <th class="label-column">Phone</th>
    <td class="data">{{$ctrl.details.phone}}</td>
  </tr>
  <tr>
    <th class="label-column">Relationship</th>
    <td class="data">{{$ctrl.details.relationship}}</td>
  </tr>
  </table>

  <contact details="{{$ctrl.data.contact1}}"></contact>
  <contact details="{{$ctrl.data.contact2}}"></contact>
  <contact details="{{$ctrl.data.contact3}}"></contact>
  <contact details="{{$ctrl.data.contact4}}"></contact>
</div>

我的问题是如何正确地将作为 mainComponent 一部分的联系人详细信息传递给 contactComponent，以便我可以访问其在相应模板中的字段。如果我在没有花括号的情况下传递它们，联系人组件似乎根本不会获取任何数据。如果我用花括号传递它们，联系人组件似乎以某种方式获取它们，但不是正确的 json 对象，因为我无法访问联系人块中的字段。我确定我遗漏了一些微不足道的东西，但没能找出我哪里出错了。

Answer 1

使用单向<绑定而不是插值@绑定因为 @ 监视插值，如果没有插值，则将原始属性字符串作为值本身传递。 < 或 = 绑定监视表达式更改并相应地使用表达式值更新模板。在这种特殊情况下，< 比 = 更方便，因为我们只需要观察组件的输入变化，我们不需要额外的观察来通过改变相同的表达式来影响父级。
应用后 < 安全地使用不带花括号的属性值。
在 $onInit 控制器生命周期钩子中初始化你的组件逻辑，因为这个钩子是在绑定初始化后调用的，这正是你的 console.log("- details=", this.details);在 contact 控制器中给出 - details=undefined。

代码详情：

let app = angular.module('app', []);

app.component('mainComponent', {
  template: `
  <div>
  <h1>Person information</h1>
  <table>
  <tr>
    <th class="label-column">First & last name</th>
    <td class="data">{{$ctrl.data.person.firstName}} {{$ctrl.data.person.lastName}}</td>
  </tr>
  <tr>
    <th class="label-column">Address</th>
    <td class="data">{{$ctrl.data.person.address}}</td>
  </tr>
  <tr>
    <th class="label-column">ZIP code & Place</th>
    <td class="data">{{$ctrl.data.person.zipCode}} {{$ctrl.data.person.place}}</td>
  </tr>
  </table>

  <contact details="$ctrl.data.contact1"></contact> <!-- passing the details like this sort of works -->
  <contact details="$ctrl.data.contact2"></contact>
  <contact details="$ctrl.data.contact3"></contact>     <!-- passing the details like this does not work at all -->
</div>
  `,
  controller: ['$scope', '$http', function mainController($scope, $http) {
  
    var self = this;
    
    self.$onInit = () => {
      self.data = {
        "person": {
          "lastName": "Bettertester",
          "firstName": "Fester",
          "address": "Out in the woods 17",
          "zipCode": "10666",
          "place": "Back of beyond"
        },
        "contact1": {
          "firstName": "Jane",
          "lastName": "Doe",
          "phone": "555-987-654",
          "relationship": "Aunt"
        },
        "contact2": {
          "firstName": "Kherumple",
          "lastName": "Whaduffle",
          "phone": "555-666-000",
          "relationship": "Imaginary friend"
        },
        "contact3": {
          "firstName": "Kherumple",
          "lastName": "Whaduffle",
          "phone": "555-666-000",
          "relationship": "Imaginary friend"
        }
      };
    };
    
  }]
});

app.component('contact', {
  template: `
    <div>
  <h2>Contact</h2>
  <table>
  <!-- this works -->
  <tr>
    <th class="label-column">Everything</th>
    <td class="data">{{$ctrl.details}}</td>
  </tr>
  <tr>
    <th class="label-column">First & last name</th>
    <td class="data">{{$ctrl.details.firstName}} {{$ctrl.details.lastName}}</td>
  </tr>
  <tr>
    <th class="label-column">Phone</th>
    <td class="data">{{$ctrl.details.phone}}</td>
  </tr>
  <tr>
    <th class="label-column">Relationship</th>
    <td class="data">{{$ctrl.details.relationship}}</td>
  </tr>
  </table>
</div>
  `,
  bindings: {
    details: '<'
  },
  controller: ['$scope', '$http', function jassMonitorHandController($scope, $http) {
    this.$onInit = () => {
      console.log("- details=", this.details);
    };
  }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="app">
    <main-component></main-component>
</div>

Answer 2

问题出在 contact 组件中的 details 绑定。

应该是details: '<'（单向绑定）而不是details: '@'（一次性字符串绑定）。使用这种类型的绑定时，模板中不需要大括号。

Answer 3

我认为您可以重写组件以接收联系人数组并使用 ng-repeat 指令

<div ng-repeat='item in contactList'>
  <table>//your stuff</table>

使用相等运算符通过绑定传递数据以接收 ng-model

bindings: '='

我能建议的最后一件事是创建一个服务来检索和存储数据并注入相应的组件

有用的资源

AngularJs: 如何将我的部分数据从一个组件传递到另一个组件

AngularJs: How to pass part of my data from one component to another

angularjs

angularjs-components