Question

我对Angular-Typescript概念很新。

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

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

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

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

请参阅下面的代码示例

Answer 1

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

例如：在每个组件上定义一个名为searchModel的绑定，它是双向绑定，所以给定<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>

Answer 2

您可以使用角度事件以异步方式在控制器之间进行通信。使用 $ scope。$ on（'inputChanges'）订阅你的监听器控制器，当输入改变时（你必须使用$ watch或ng-change指令来检测更改）发送事件< strong> $ rootScope。$ broadcast 或 $ scope。$ emit （您应该使用的是父/子控制器结构的问题，请参阅角度文档的差异{{3} } $ rootScope.Scope）。

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

角度1.5组件通信/控制器之间的数据共享

2 个答案: