[英]How to decorate a component in 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
属性的存在,但这显然污染了设计。
更新:感谢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文档- https://docs.angulardart.org/#angular-core-annotation.AttachAware
要更改ShadowDom组件的样式,可以使用element.shadowRoot获取Web组件的根。 影子根几乎就像“文档”对象。 您可以使用影子根获得对任何元素的引用,然后可以根据需要应用样式轻松地对其进行修改。
您可以使用类似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')");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.