如何在 angular.dart 中装饰组件答案

【问题标题】：How to decorate a component in angular.dart如何在 angular.dart 中装饰组件
【发布时间】：2014-05-17 20:57:03
【问题描述】：

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

<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 对象中获得了空的 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}");
  }

}

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

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

【问题讨论】：

我认为如果您提供一些代码来显示您尝试完成的工作，这可能会有所帮助。也许只是一个new Future(() { access the elements shadowRoot here }); 就足够了。
@GünterZöchbauer 你怎么能在 2 分钟内回复？！我将添加最少的代码...
我打开了 SO 页面，我看到出现了一个新问题，仅此而已 - 没有魔法，没有技巧 ;-)
很高兴得到如此快速的响应 - 证明 Dart 已经摇滚了。关于我的问题，是否有其他方法来装饰自定义组件？
您可以在组件onShadowRoot() 方法和装饰器中的element.on['on-shadow'].listen((e) => dosomething) 中触发一个事件。缺点是需要更换组件。

标签： dart angular-dart angular-decorator

【解决方案1】：

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

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

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

你可以使用类似的东西 this.element.shadowRoot.querySelector('[some-attr]').innerHtml = "Modified by decorator" // 免责声明：未经测试，但我希望你明白。

【讨论】：

有趣，我以为 onShadowRoot 只能在组件中工作。
不幸的是，onShadowRoot 没有在 Decorator 中调用。
@drasko-kokic，抱歉，请尝试使用 AttachAware，它是 attach 方法，而不是 ShadowRootAware.onShadowRoot。
即使使用最新的 Dart SDK 1.4.0，element.shadowRoot.querySelector 也永远不会返回任何对象。任何工作样本都会非常有帮助。

【解决方案2】：

您可以通过编程方式向 shadowDom 添加样式标签：

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

或

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

【讨论】：