如何在angular.dart中装饰组件

Question

我想提供一种可能性，可以使用装饰器以不同的外观和思想展示我的组件。 就像是：

<body>
    <my-component my-decorator></my-component>
</body>

。

@Component(
  selector: 'my-component',
  templateUrl: '.../my-component.html',
  cssUrl: '.../my-component.css',
  publishAs: 'comp',
)
class MyComponent {

  MyComponent(final Element element) {
    Logger.root.fine("MyComponent(): element = $element, element.attributes = ${element.attributes.keys}");
  }

}


@Decorator(selector: '[my-decorator]')
class MyDecorator {

  final Element element;

  @NgOneWay('my-decorator')
  var model; // is not used

  MyDecorator(this.element) {
    Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
    Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
  }

}

不幸的是，似乎my-decorator在my-component之前处理，因此它在注入的Element对象中获得null shadowRoot属性。

可以在my-component支持类中检查my-decorator属性的存在，但这显然污染了设计。

---

更新：感谢Marko Vuksanovic的重播，以下内容现在返回：

@Decorator(selector: '[my-decorator]')
class MyDecorator extends AttachAware {

  final Element element;

  @NgOneWay('my-decorator')
  var model; // is not used

  MyDecorator(this.element) {
    Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
    Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
  }

  void attach() {
    Logger.root.fine("attach(): element.shadowRoot = ${element.shadowRoot}");
  }

}

问题仍然是如何修改影子DOM的样式。

在此先感谢您的任何意见/想法/解决方案。

Answer 1

您可以尝试使用AttachAware及其附加方法。 您应该在装饰器和/或组件中实现AttachAware接口。

这里的链接Angular.dart文档- https://docs.angulardart.org/#angular-core-annotation.AttachAware

要更改ShadowDom组件的样式，可以使用element.shadowRoot获取Web组件的根。 影子根几乎就像“文档”对象。 您可以使用影子根获得对任何元素的引用，然后可以根据需要应用样式轻松地对其进行修改。

您可以使用类似this.element.shadowRoot.querySelector（'[some-attr]'）。innerHtml =“修饰者修饰的” //免责声明：未经测试，但希望您能理解。

Answer 2

您可以通过编程将样式标签添加到shadowDom：

shadowRoot.append(new StyleElement()..text = ':host{background: red;}');

要么

shadowRoot.append(new StyleElement()..text = "@import url('some.css')");