如何在angular.dart中装饰零部件

我想提供一个可能性，显示我的组件在一个有点不同的外观和感觉，并使用它的装饰思想。比如：

@组件(
选择器：“我的组件”，
templateUrl:“…/my component.html”，
cssUrl:“…/mycomponent.css”，
出版：comp，
)
类MyComponent{
MyComponent（最终元素）{
Logger.root.fine（“MyComponent（）：element=$element，element.attributes=${element.attributes.keys}”）；
}
}
@装饰器（选择器：“[my Decorator]”）
类装饰器{
最终元素；
@NgOneWay（“我的装饰师”）
var model；//未使用
MyDecorator（this.element）{
fine（“MyDecorator（）：element=$element，element.nodeName=${element.nodeName}”）；
Logger.root.fine（“MyDecorator（）：element.shadowRoot=${element.shadowRoot}，element.parent=${element.parent}”）；
}
}

不幸的是，

mydecorator

似乎是在

mycomponent

之前处理的，因此它在注入的

元素

对象中得到null

shadowRoot

属性

可以检查

mycomponent

支持类中是否存在

mydecorator

属性，但这显然会污染设计

---

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

@Decorator（选择器：“[my Decorator]”）
类MyDecorator扩展了AttachAware{
最终元素；
@NgOneWay（“我的装饰师”）
var model；//未使用
MyDecorator（this.element）{
fine（“MyDecorator（）：element=$element，element.nodeName=${element.nodeName}”）；
Logger.root.fine（“MyDecorator（）：element.shadowRoot=${element.shadowRoot}，element.parent=${element.parent}”）；
}
无效附加（）{
Logger.root.fine（“attach（）：element.shadowRoot=${element.shadowRoot}”）；
}
}

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

---

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

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

这里是Angular.dart文档的链接-

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

你可以用像这样的东西

---

this.element.shadowRoot.querySelector（“[some attr]”）。innerHtml=“被装饰者修改”//免责声明：未测试，但我希望您能理解。您可以通过编程方式向shadowDom添加样式标记：

shadowRoot.append（new-StyleElement（）…text=':host{background:red；}'）；

或

shadowRoot.append（new StyleElement（）…text=“@import url（'some.css'）”）；

我认为，如果您提供一些代码来展示您试图完成的任务，可能会有所帮助。也许只是一个新的未来（（）{在这里访问shadowRoot元素}）可能足够了。@GünterZöchbauer你怎么能在2分钟内做出反应？！我将添加最少的代码…我打开了页面，看到出现了一个新问题，仅此而已-没有魔术，没有把戏；-）很高兴能得到如此快速的回应——这证明Dart已经成功了。关于我的问题，是否有其他方法装饰自定义组件？您可以在组件

onShadowRoot（）

方法和

元素中激发事件。在['on-shadow']上。在装饰器中侦听（（e）=>dosomething）

。缺点是组件需要更改。有趣的是，我认为onShadowRoot只能在组件中工作。不幸的是，

Decorator

中没有调用

onShadowRoot

@drasko kokic，抱歉，尝试使用AttachAware及其attach方法而不是ShadowRootAware.onShadowRoot。即使使用最新的Dart SDK 1.4.0，

元素.shadowRoot.querySelector

也不会返回任何对象。任何工作样品都会非常有用。