Question

我想基于从AJAX调用接收的一些信息动态构建组件树。

如何以编程方式从其他组件内部向DOM添加组件？我有<outer-comp>我想根据一些逻辑插入一个<inner-comp>。以下代码只是将元素<inner-comp></inner-comp>插入到DOM中，而不是实际的<inner-comp>表示。

@NgComponent(
  selector: 'outer-comp',
  templateUrl: 'view/outer_component.html',
  cssUrl: 'view/outer_component.css',
  publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {      
  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");
  }
}

更新我设法以下列方式正确渲染内部组件，但我仍然不确定这是否正确：

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  AppComponent(this.compiler, this.injector);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler(inner.nodes);
    var block = template(injector);
    inner.replaceWith(block.elements[0]); 
  }

}

Answer 1

在AngularDart 0.9.9中更改了API：

BlockFactory现在是ViewFactory
范围。$ new现在似乎是scope.createChild（scope.context）
injector.createChild（modules）现在需要一个模块列表（而不是一个模块）

AngularDart 0.10.0引入了这些变化：

NgShadowRootAware不是ShadowRootAware
.. value（）现在是..bind（。，toValue：。）

所以pavelgj的代码现在看起来像这样：

class AppComponent extends ShadowRootAware {
  Compiler compiler;
  Injector injector;
  Scope scope;
  DirectiveMap directives;

  AppComponent(this.compiler, this.injector, this.scope, this.directives);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    ViewFactory template = compiler([inner], directives);
    Scope childScope = scope.createChild(scope.context);
    Injector childInjector = 
        injector.createChild([new Module()..bind(Scope, toValue: childScope)]);
    template(childInjector, [inner]);
    }
  }

Answer 2

这将是块API的正确使用。

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  Scope scope;
  DirectiveMap directives;

  AppComponent(this.compiler, this.injector, this.scope, this.directives);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler([inner], directives);
    Scope childScope = scope.$new();
    Injector childInjector = 
        injector.createChild(new Module()..value(Scope, childScope));
    template(childInjector, [inner]);
  }
}

此外，如果您需要重新编译内部模板，请务必在之前的childScope.$destroy()上执行childScope。

Answer 3

由于Angular Dart库中的更改，上述代码会对较长时间的工作进行采样。特别是ViewFactory.call，它不再使用注入器，而是使用Scope和DirectiveInjector。我已经尝试过调整上面的内容而且非常接近。该组件显示但没有任何绑定被替换（例如，我看到{{cmp.value}}。

这是我正在使用的代码。我认为这里的问题是DirectiveInjector是以null形式出现的。

void main() {
  IBMModule module = new IBMModule();
  AngularModule angularModule = new AngularModule();

  Injector injector = applicationFactory()
  .addModule(module)
  .run();

  AppComponent appComponent = injector.get(AppComponent);
  appComponent.addElement("<brazos-input-string label='test'/>");
}

@Injectable()
class AppComponent {
  NodeValidator validator;
  Compiler _compiler;
  DirectiveInjector _injector;
  DirectiveMap _directiveMap;
  NodeTreeSanitizer _nodeTreeSanitizer;
  Scope _scope;

  AppComponent(this._injector, this._compiler, this._directiveMap, this._scope, this._nodeTreeSanitizer) {
    validator = new NodeValidatorBuilder.common()
                      ..allowCustomElement("BRAZOS-INPUT-STRING")
                      ..allowHtml5()
                      ..allowTemplating();
  }

  void addElement(String elementHTML) {
    DivElement container = querySelector("#container");
    DivElement inner = new DivElement();
    inner.setInnerHtml(elementHTML, validator: validator);
    ViewFactory viewFactory = _compiler.call([inner], _directiveMap);
    Scope childScope = _scope.createChild(new PrototypeMap(_scope.context));
    if (_injector == null) {
      print("injector is null");
    }
    View newView = viewFactory.call(childScope, _injector);
    container.append(inner);
    newView.nodes.forEach((node) => inner.append(node));
  }
}


class IBMModule extends Module {
  IBMModule() {
    bind(BrazosInputStringComponent);
    bind(BrazosTextAreaComponent);
    bind(BrazosButtonComponent);
    bind(ProcessDataProvider, toImplementation: ActivitiDataProvider);
    bind(AppComponent);
  }
}

Answer 4

我终于让它工作了，但不满意不得不添加一个计时器：

@Injectable()
class AppComponent{
  NodeValidator validator;
  Compiler _compiler;
  DirectiveInjector _directiveInjector;
  DirectiveMap _directiveMap;
  NodeTreeSanitizer _nodeTreeSanitizer;
  Injector _appInjector;
  Scope _scope;

  AppComponent(this._directiveInjector, this._compiler, this._directiveMap, this._nodeTreeSanitizer, this._appInjector, this._scope) {
    validator = new MyValidator();
  }

  void addElement(String id, String elementHTML) {
    DivElement container = querySelector(id);
    DivElement inner = new DivElement();
    container.append(inner);
    Element element = new Element.html(elementHTML, validator: validator);
    ViewFactory viewFactory = _compiler.call([element], _directiveMap);
    if (_scope != null) {
      Scope childScope = _scope.createProtoChild();
      View newView = viewFactory.call(childScope, _directiveInjector);
      newView.nodes.forEach((node) => inner.append(node));
      Timer.run(() => childScope.apply());
    } else {
      print("scope is null");
    }
  }
}

Answer 5

修改

包http://pub.dartlang.org/packages/bwu_angular包含此装饰器/指令bwu-safe-html

<强> ------

我使用自定义指令

@NgDirective( selector: '[my-bind-html]' ) class MyBindHtmlDirective { static dom.NodeValidator validator; dom.Element _element; Compiler _compiler; Injector _injector; DirectiveMap _directiveMap; MyBindHtmlDirective(this._element, this._injector, this._compiler, this._directiveMap) { validator = new dom.NodeValidatorBuilder.common() ..allowHtml5() ..allowImages(); } @NgOneWay('my-bind-html') set value(value) { if(value == null) { _element.nodes.clear(); return; } _element.setInnerHtml((value == null ? '' : value.toString()), validator: validator); if(value != null) { _compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes); } } }

可以像
一样使用
my-bind-html='ctrl.somehtml'

角度问题
我创建了一个问题，将此功能纳入Angulars ng-bind-html https://github.com/angular/angular.dart/issues/742（已拒绝）

如何在Angular.Dart中以编程方式添加组件？

5 个答案: