如何访问组件外部的 AngularDart 组件属性 (NgOneWay)，例如。在它所在的页面上？答案

【问题标题】：How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?如何访问组件外部的 AngularDart 组件属性 (NgOneWay)，例如。在它所在的页面上？
【发布时间】：2014-07-01 07:37:54
【问题描述】：

这是一个页面中的 AngularDart 组件。

<body>
<testcomponent></testcomponent>
  <p>Should have value {{testcomponent.test}}</p>
</body>

组件有一个 NgOneWay

@NgOneWay("test")
String test = "HELLO";

这不起作用，因为页面上没有显示任何值。该组件可以在组件 HTML 中显示其 NgOneWay，但我希望在使用该组件的页面上的组件 HTML 之外访问它。

有什么方法可以在使用组件的页面上显示组件 NgOneWay 吗？

这是我的测试代码。 http://www.topazbooking.com/test2.zip

我正在使用 Dart 1.5.1

好的，我知道这不是一个好习惯，它会在使用组件的页面和组件本身之间建立依赖关系。我遇到的问题是我使用了一些在组件中不起作用的 javascript，这是一个不同的问题......我不应该在这里解释，但我试图只使用视图而不是组件，因为我的 js 在查看但不在组件中。

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

简而言之：不，你不能在组件之外获取属性，因为组件不是为了这样做

在 Angular Dart 中，组件需要被视为一个黑盒子，您可以像乐高积木一样组合它来创建结构化应用程序。你不能在其他地方使用乐高积木的一部分。

供您参考，NgOneWay、NgAttr 和 NgTwoWay 在这里与您的组件交互，但作为 HTML 属性。

一个小例子：

<body>
<testcomponent test="Hi friend"></testcomponent>
</body>

但是你可以在组件中获取你的属性

testcomponent.html

<div>
     <p>Should have value {{testcomponent.test}}</p>
</div>

如果你真的想得到你想要的行为，你需要使用Controller

注意：您可以通过添加静态值来进行欺骗。但不是这样做的好方法

【讨论】：

【解决方案2】：

我发现处理这种情况的最佳方法是在组件上映射一个值更改处理程序。在您的情况下，您将映射一个 on-test-change 属性。

<testcomponent on-test-change="ctrl.testChangeHandler"></testcomponent> <p>Should have value {{ctrl.testValue}}</p> </body>

testChangeHandler 方法可能是一个接受字符串的函数。每当更新测试值时，testcomponent 将调用 on-test-change 处理程序。然后父组件将在处理程序中设置testValue。正如另一个答案中提到的，这需要一个父组件。

这个解决方案的好处是它使组件完全解耦，这总是一件好事！

【讨论】：