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，因此它在注入的shadowRoot对象中获得了null Element属性。

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

更新：感谢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组件的根目录。暗影根几乎就像文件＆＃39;宾语。您可以使用shadow root来获取对任何元素的引用，然后您可以根据需要通过应用样式轻松地修改它。

你可以使用类似的东西 this.element.shadowRoot.querySelector（＆＃39; [some-attr]＆＃39;）。innerHtml =＆＃34;由装饰者修改＆＃34; //免责声明：未经测试，但我希望您明白这一点。

Answer 2

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

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

或

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

如何在angular.dart中装饰组件

2 个答案: