您如何使用ng-model从AngularJS（版本1.5.5）的父组件中获取数据？

Question

下面是我的代码输出的图像；我知道如何显示从父级组件传递来的数据（即100），但我不知道如何通过ng-model显示父级数据（即在文本框中未显示100）。

这是我的HTML和AngularJS代码：

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

app.component('parentComponent', {
    controller: 'parentController'
})
.controller( 'parentController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 100 };
 })

app.component('childComponent', { // CHILD COMPONENT
    bindings: { displayFirst: '=' },
    template: `<div><label>Parent Value: </label><input type="text" ng-model="$ctrl.object.first"></div>`,
    controller: 'childController'
})
.controller('childController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 25 };
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body>
    <div ng-app="app">
        <div ng-controller="parentController as parent">
            <div ng-controller="childController">
                <child-component displayFirst="parent.object.first">
                </child-component>
                {{ parent.object.first }}
            </div>
        </div>
    </div>
</body>

Answer 1

是的，这非常简单，当您要传递到router-outlet中的组件时，您需要使用services，实际上，在转到正确的路径之前，该组件在模板中不存在，因此通常的绑定不会在这里不工作。

所以解决此问题的最佳方法是创建一些简单的服务

服务中

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataTransferService {

  private products= new BehaviorSubject<any>([]);
  cast= this.products.asObservable();

  sendAnything(data) {
    this.products.next(data);
  }

}

然后将您的服务注入到父组件和子组件的构造函数中

在父组件中

 constructor(private dataTransfer: DataTransferService){}

然后创建一个方法 shareData(data){
    this.dataTransfer.sendAnything(data) // to send something
}

并从parent.component.html中使用]进行调用>(click)="shareData(data)" // data is the parent data that you want to share
在子组件中
在ngOnInit方法内添加：
 ngOnInit() {
   this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
 }
获取数据并使用它。您可以在doc
中找到更多信息和示例

您如何使用ng-model从AngularJS（版本1.5.5）的父组件中获取数据？

问题描述投票：0回答：1

1个回答

在ngOnInit方法内添加：

最新问题

您如何使用ng-model从AngularJS（版本1.5.5）的父组件中获取数据？

问题描述 投票：0回答：1

1个回答

在ngOnInit方法内添加：

最新问题

问题描述投票：0回答：1