如何在angular.dart中装饰组件

我想提供一种可能性，使用它的装饰器以稍微不同的外观和感觉来显示我的组件。比如:

<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属性是否存在是可能的，但这显然会污染设计。

UPDATE:感谢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的样式。

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

这是指向Angular的链接。dart docs - https://docs.angulardart.org/#angular-core-annotation.AttachAware

要更改ShadowDom组件的样式，可以使用element。shadowRoot获取web组件的根目录。影子根几乎像"文档"对象。你可以使用影子根来获取任何元素的引用，然后你可以根据需要通过应用样式来轻松地修改它。

你可以用this.element.shadowRoot.querySelector("[some-attr]")。innerHtml = "Modified by decorator"//免责声明:未经过测试，但我希望你能明白。

您可以通过编程方式为shadowDom添加样式标签:

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

或

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

相关内容

最新更新

热门标签：