CSS class 选择器可以应用于组件吗？

Question

我有以下 Plunker，它使用 ui-router 和 Angular 的 1.6x 新组件功能。

状态 'userRegister' 变为活动状态，然后初始化 'userRegister' 组件。该组件将新的 <user-register/> 注入 <ui-view>，然后注入 ng-template 脚本块的 HTML 内容，一切正常。

最后的 DOM 结果是：

<ui-view class="ng-scope">
    <user-register class="ng-scope ng-isolate-scope">
      <h1 class="header">Create account</h1>
    </user-register>
</ui-view>

但是，我找不到将 CSS class 选择器添加到 <user-register/> 标签的方法。

例如使用名为 .example 的 class 选择器，我想实现以下目标：

<user-register class="example ng-scope ng-isolate-scope">...<user-register/>

有什么想法吗？

Answer 1

当然，您总是可以将模板包装在 div 上，然后将 class 放在那里。

如果不想做，你可以注入$element并使用$postLink函数添加你需要的class：

.component('userRegister', {
    templateUrl: '/views/user-register',
    controller: function($element) {
       this.$postLink = function() {
         $element.addClass('example');
       }
    }
 })

这是工作中的 plunker：

https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview

最终 DOM:

<user-register class="ng-scope ng-isolate-scope example">
  <h1 class="header">Create account</h1>
</user-register>

CSS class 选择器可以应用于组件吗？

Can a CSS class selector be applied to a component?

angularjs

angular-ui-router

angular-component-router

angular-components