0

我对 Angular-Typescript 概念很陌生。

设置是Typescript，Angular 1.5 组件，如果可能的话不要使用 $scope

一个组件具有搜索输入字段。另一个组件应该从服务中获取返回值并渲染它。

正如许多在线文章建议使用服务在控制器（组件）之间共享数据。但这些解决方案并不真正符合我的情况。它要么是纯角度的，要么是 $scope 或者不使用打字稿。

到目前为止我的结果： 如果尝试通过服务传递变量出现在第一个组件的控制器下。第二个组件的控制器不会受到影响，传递的变量/参数（通过构造函数）也没有任何值。

有关代码示例，请参见下面的注释

4

2 回答 2

0

您可以将控制器中的变量绑定到组件。

例如：在每个组件上定义一个名为searchModel2-way binding 的绑定，因此将<comp-a>和<comp-b>作为组件，并将控制器$ctrl作为使用组件的视图的控制器，您可以这样做：

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>
</div>

因为 2 个组件在视图控制器上绑定到同一个模型，如果一个组件更改它（例如，comp-a 即“搜索”组件），另一个组件也将获得更改。

这在您可以使用组件的多个实例的情况下很有用，因此您可以使用视图控制器上的不同模型变量连接每组 2 个组件。

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>

    <!-- changes in $ctrl.search2 will not reflect to comp-b above, only the one below -->
    <comp-a search-model="$ctrl.search2"></comp-a>
    <comp-b search-model="$ctrl.search2"></comp-b>
</div>
于 2016-09-20T09:32:08.423 回答
0

您可以使用角度 事件以异步方式在控制器之间进行通信。使用$scope.$on('inputChanges')订阅您的侦听器控制器，当输入更改时（您必须使用 $watch 或 ng-change 指令来检测更改）使用$rootScope.$broadcast或$scope发送事件.$emit（您应该使用哪个是父/子控制器结构的问题，请参阅角度文档https://docs.angularjs.org/api/ng/type/$rootScope.Scope的区别）。

关于 $scope 和不使用它，Angular 现在建议使用ControllerAs语法，但使用 $scope 完全没有问题。请注意如何使用一次性绑定以避免不必要的观察者，并记住使用$inject将其注入控制器和构造函数中。

于 2016-09-20T11:37:47.510 回答