angular.dart как программно создать пользовательский компонент и добавить его на страницу?

Можно ли определить компонент angular-dart, а затем программно создать экземпляр этого компонента и добавить его на свою веб-страницу? Я надеялся, что может быть что-то вроде:

import 'package:web_sandbox/web_sandbox.dart';
import 'package:angular/angular.dart' as ng;

void main() {
  document.body.appendHtml('<web-sandbox-component></web-sandbox-component>');
  var node = document.body.query('web-sandbox-component');
  ng.compile(node);
}

есть ли возможность программно создать веб-компонент angular и добавить его на страницу, возможно, как в приведенном выше псевдо-примере, и если да, то как?


dart angular-dart
person Daniel Robinson    schedule 20.04.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я не думаю, что это возможно с Angular.

Вы можете добавить HTML-тег <web-sandbox-component> в DOM и сказать Angular, что он должен обработать этот новый HTML, а затем Angular создаст экземпляр Angular-компонента для этого тега (это вопрос, о котором вы связали).

Я не считаю это ограничением. Есть ли что-то, что вы хотели бы сделать, но это невозможно?

ИЗМЕНИТЬ

Ваш код в основном должен выглядеть так:

мой документ выглядит как

...
<body>
  <div id="mydiv"></div>
  ...
</body>

и я добавляю <web-sandbox-component> в div

main() {
  print('main');
  ng.Injector inj = ngaf.applicationFactory().addModule(new MyAppModule()).run();
  var node = dom.querySelector('#mydiv');
  node.append(new dom.Element.html('<web-sandbox-component></web-sandbox-component>', validator: new dom.NodeValidatorBuilder()..allowCustomElement("web-sandbox-component")));
  ng.Compiler compiler = inj.get(ng.Compiler);
  ng.DirectiveMap directiveMap = inj.get(ng.DirectiveMap);
  compiler(node.childNodes, directiveMap)(inj, node.childNodes);
}
person Günter Zöchbauer    schedule 20.04.2014
comment
нет, это в основном то же самое, я просто не совсем понял, о чем был этот другой вопрос с расширением NgShadowDomAware - person Daniel Robinson; 21.04.2014
comment
implements NgShadowDomAware просто сообщает Angular вызвать onShadowRoot, когда теневой DOM будет готов. По сути, это время, когда содержимое компонента готово к взаимодействию. - person Günter Zöchbauer; 21.04.2014
comment
так что, если я позвоню document.body.appendHtml('<web-sandbox-component></web-sandbox-component>');, angular автоматически обнаружит изменение dom и заполнит его теневым dom моего шаблона компонентов? - person Daniel Robinson; 21.04.2014
comment
Нет, вам нужно вызвать компиляцию нового HTML, чтобы Angular «обработал» его. Это то, о чем ответы на вопрос, который вы связали. - person Günter Zöchbauer; 21.04.2014
comment
спасибо, выглядит отлично, я попробую, когда вернусь домой, и тогда приму ответ, только для тех, кто не знает (например, я), что такое MyAppModule и как мне его определить? - person Daniel Robinson; 28.04.2014
comment
Вам нужен модуль (может быть любое имя класса) для регистрации ваших пользовательских компонентов / декораторов. подробнее см. angulardart.org/tutorial/04-ch02-controller.html подробности (во фрагментах кода в разделе Общие сведения о контроллерах @Controller) - person Günter Zöchbauer; 28.04.2014
comment
ах круто, так что именно там вы регистрируете все свои пользовательские компоненты / директивы / контроллеры / и т.д. в конструкторе класса, расширяющего ng.Module - person Daniel Robinson; 28.04.2014