CSS类选择器可以应用于组件吗?

时间:2017-04-06 12:26:31

标签: angularjs angular-ui-router angular-components angular-component-router

我有以下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>

但是,我找不到在<user-register/>标记中添加CSS类选择器的方法。

e.g。使用名为.example的类选择器我想实现以下目标:

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

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

当然,你总是可以将模板包装在一个div上并将该类放在那里。

如果不想这样做,您可以注入$element并使用$postLink函数添加所需的课程:

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

以下是工作人员:

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>