Блог

Главная - Вопросы по программированию - Как получить доступ к атрибуту компонентов AngularDart (NgOneWay) за пределами компонента, например, на странице, на которой он находится?

Как получить доступ к атрибуту компонентов AngularDart (NgOneWay) за пределами компонента, например, на странице, на которой он находится?

#dart #angular-dart

#дротик #angular-dart #dart

Вопрос:

Вот компонент AngularDart на странице.

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

Компонент имеет NgOneWay из

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

Это не работает, поскольку на странице не отображается значение. Компонент может отображать свой NgOneWay в компонентах HTML, но я хочу получить к нему доступ за пределами компонентов HTML на странице, где используется компонент.

Есть ли какой-либо способ показать компоненты NgOneWay на странице, на которой используется компонент?

Вот мой тестовый код. http://www.topazbooking.com/test2.zip

Я использую Dart 1.5.1

Хорошо, я понимаю, что это не очень хорошая практика, это создает зависимость между страницей, использующей компонент, и самим компонентом. Проблема, с которой я сталкиваюсь, заключается в том, что я использую некоторый javascript, который не работает внутри компонента, это другая проблема… Я не должен здесь объяснять, но я пытался использовать только представление, а не компонент, поскольку мой js работал в представлении, но не в компоненте.

Ответ №1:

Короче говоря: нет, вы не можете получить атрибут вне компонента, потому что компонент не предназначен для этого

В Angular Dart компонент должен выглядеть как черный ящик, который вы можете скомпоновать, как lego, для создания структурированного приложения. Вы не можете использовать часть конструктора lego где-то еще.

Для вашей информации NgOneWay , NgAttr и NgTwoWay здесь для взаимодействия с вашим компонентом, но в качестве атрибута HTML.

Небольшой пример:

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

Но вы можете получить свой атрибут внутри компонента

testcomponent.html

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

Если вы действительно хотите получить желаемое поведение, вам нужно использовать контроллер

Примечание: Вы можете обмануть, если хотите, добавив статическое значение. но это не самый лучший способ сделать это

Ответ №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 внутри обработчика. Как упоминалось в другом ответе, для этого потребуется родительский компонент.

Хорошая особенность этого решения в том, что оно полностью отделяет компонент, что всегда хорошо!