How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?

隐身守侯 提交于 2019-12-12 06:28:27

问题


Here is a AngularDart component in a page.

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

The component has a NgOneWay of

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

This does not work as no value is shown on the page. The component can show its NgOneWay within the components HTML but I wish to access it outside of the components HTML on the page where the component is used.

Is there any way to show the components NgOneWay on the page in which the component is being used?

Here is my test code. http://www.topazbooking.com/test2.zip

I am using Dart 1.5.1


Ok I understand its not a good practice, it creates a dependancy between the page using the component and the component itself. The problem I have is that I use some javascript which doesn't work within the component, that's a different problem ... I shouldn't explain here but I was trying to use the view only and not component as my js worked in the view but not in the component.


回答1:


In short : No you can't get the attribute outside the component, because component is not make to do this

In Angular Dart, Component need to be see as a black box that you can compose like lego to create a structured application. You can't use a part of a piece of lego somewhere else.

For you information NgOneWay, NgAttr and NgTwoWay are here to interact with your component but as HTML attribute.

A little example:

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

But you can get your attribute inside the component

testcomponent.html

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

If you really want to get the behavior that you want, you need to use Controller

Note: You can trick if you want by adding static value. but is not the good way to do it




回答2:


The best way I've found to handle this type of situation is to map a value-change handler on the component. In your case, you'd map a on-test-change attribute.

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

The testChangeHandler method would presumably be a function that accepts a string. testcomponent would call the on-test-change handler whenever the test value is updated. The parent component would then set testValue within the handler. As mentioned in another answer, this would require a parent component.

The nice thing about this solution is it keeps component completely decoupled, which is always a good thing!



来源:https://stackoverflow.com/questions/24504862/how-to-access-a-angulardart-components-attribute-ngoneway-outside-of-the-compo

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!