Question

这是页面中的AngularDart组件。

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

该组件的NgOneWay为

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

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

有没有办法在使用该组件的页面上显示组件NgOneWay？

我正在使用Dart 1.5.1

好的，我理解它不是一个好的做法，它在使用组件的页面和组件本身之间创建了一个依赖关系。我遇到的问题是我使用了一些在组件内不起作用的javascript，这是一个不同的问题......我不应该在这里解释但我只是试图使用视图而不是组件，因为我的js工作在视图但不在组件中。

Answer 1

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

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

对于您的信息NgOneWay，此处NgAttr和NgTwoWay与您的组件进行互动，但作为HTML属性。

一个小例子：

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

但是你可以在组件

中获取你的属性

testcomponent.html

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

如果您真的想要获得所需的行为，则需要使用Controller

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

Answer 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。正如另一个答案中所提到的，这将需要一个父组件。

这个解决方案的优点在于它可以使组件完全分离，这总是一件好事！