AngularDart 结构指令添加自定义内容

【问题标题】：AngularDart structural directive add custom contentAngularDart 结构指令添加自定义内容
【发布时间】：2020-03-27 19:13:24
【问题描述】：

有没有机会简单更新_viewContainer？？

我正在尝试为材料按钮组件创建指令，该指令通过按 Enter 键为提交表单添加隐藏的经典按钮。我需要将简单的 html 添加到 _viewContainer，像这样

import 'package:angular/angular.dart';

@Directive(
  selector: '[kpMaterialSubmit]',
)
class KpMaterialSubmit {
  final TemplateRef _templateRef;
  final ViewContainerRef _viewContainer;

  KpMaterialSubmit(this._viewContainer, this._templateRef);

  @Input()
  set kpMaterialSubmit(bool showButton) {
    _viewContainer.clear();
    if (showButton) {
      _viewContainer.createEmbeddedView(_templateRef);

      //THIS IS THE IMPORTANT PART
      _viewContainer.createMyCustomView('<button class="hidden">Submit</button>');
    } else {
      _viewContainer.createEmbeddedView(_templateRef);
    }
  }
}

【问题讨论】：

标签： angular-dart

【解决方案1】：

我做过类似的事情，它有效。不知道有没有更好的办法。

不要直接使用html文本，而是创建一个组件。

将导入添加到组件模板中：

import 'package:<your package>/<path to component>/<component source name>.template.dart';

然后使用 createComponent() 方法添加组件（而不是 createMyCustomView()）：

_viewContainer.createComponent(<componentName>NgFactory);

就是这样！

如果您需要为组件设置样式或添加任何属性，您可以获取引用并派生 HtmlElement 实例：

ComponentRef _componentRef = _viewContainer.createComponent(<componentName>NgFactory);
HtmlElement element = _componentRef.location;
element.style.background = 'green';
element.setAttribute('value', 'text');

【讨论】：