Использовать библиотеку dart: html в angulardart

Я хочу знать, как использовать (если это возможно) dart: html в angulardart. Я пробую это в примере по умолчанию в webstorm при создании проекта angulardart (список задач).

Я пытаюсь вставить код дротика, но он не работает. Он работает, только если я вставлю его в OnInit, автоматически реализованный ngOnInit. Это единственный способ? Использовать дротик для управления DOM в AngularDart, это правильная практика? Мне нужен AngularDart для полноценной функциональной системы маршрутизации

0
0
145
1

Ответы 1

Вы можете получить доступ к базовым элементам dart: html в AngularDart несколькими способами:

например:

<div #myEl></div>
{{foo(myEl)}}

import 'dart:html';
@Component(...)
class ... {
  foo(DivElement div) {
    ...
  }
}

Вы также можете получить это представление div ViewChild:

...
  @ViewChild('myEl')
  DivElement div;
...

И вы можете запросить это в конструкторе вашего компонента:

@Component(...)
class MyClass {
  DivElement div;
  MyClass(Element e) : div = e;
  ...

И вы можете реализовать «функциональные директивы», у которых вообще нет класса, а просто вызывать API dart: html в компоненте при его создании:

@Directive(...)
void myFunctionalDirective(Element e) {
  ...
}

Надеюсь, один или несколько из этих вариантов использования удовлетворят ваши потребности.

Помните, что всякий раз, когда вы используете библиотеку dart: html, вы можете делать вещи, которые AngularDart не может отслеживать, и вы можете столкнуться с запутанным поведением. Лучше всего позволить angular сделать для вас столько, сколько он может, и использовать dart: html только как своего рода «бэк-энд» некоторых небольших компонентов и позволить angular соединять их вместе. Но это очень большая тема, которой можно заполнить небольшую книгу :)

Я новичок в Дарт и Ангулардарт, и мне нужен университет. Я не понимаю, как использовать последний @Directive: в этой функции будут инициализированы переменные DOM? Не могли бы вы написать мне пример для всех способов ввода текста и кнопки, которая при нажатии печатает этот ввод в текстовом элементе DOM? Например, это HTML <input id = "test-input" /> <button id = "test-input"> Прочитать ввод </button> <p id = "read-text" />. На самом деле спасибо за ваш ответ

Sum_Pie 11.08.2018 00:41

Это не то, что вы хотите делать в собственном DOM API, почти наверняка. Для этого вам понадобится записанный класс MyComponent {String; Показана строка; } с шаблоном <input [(ngModel)] = "написано" /> <button (click) = "shown = Written"> Прочитать ввод </button> <p> {{shown}} </p> .... .. Чтобы рискнуть дать вам правильный, но вредный совет, подход с функциональной директивой будет @Directive (selector: "test-input") void neverWriteThisCode (Element e) {e.onClick ((_) {document.getElementById ('read- текст '). content = document.getElementById (' test-input '). value;}); }. Это ужасно, если только ваш случай не очень особенный

Mike Fairhurst 11.08.2018 22:11

Ладно, это не лучший способ ... Или ангулардарт, или дарт-ланг. Мне нужно найти способ управлять / создавать маршрут в dart-lang, в противном случае я включаю angulardart. Большое спасибо

Sum_Pie 11.08.2018 23:36

Другие вопросы по теме