如何在angular.dart中装饰组件

时间:2014-05-17 20:57:04

标签: dart angular-dart angular-decorator

我想提供一种可能性,使用装饰器来展示我的组件有一些不同的外观和感觉。类似的东西:

<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的样式。

提前感谢任何意见/想法/解决方案。

2 个答案:

答案 0 :(得分:2)

您可以尝试使用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; //免责声明:未经测试,但我希望您明白这一点。

答案 1 :(得分:0)

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

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

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