可以在NgDirective中使用css-file吗?

我有一个NgComponent和一个NgDirective，我想用组件。我的指令(drop-image)为组件的div添加了一个drop区域功能。我还想添加一个可视的区域指示(红色边框)。

我知道我可以在指令中的函数中使用element.style.border = "2px solid red"，但是像这样添加和删除样式感觉不对(例如，如果元素已经有border-style，它可能会引起麻烦)。

另一种方法是将类选择器(.drop-image)添加到组件的css文件中，然后在指令中切换类。这种方法可以在我的例子中找到。这里的问题是，我必须将样式与类选择器添加到组件的文件中，因此该指令不是"独立的"。

有没有办法在NgDirective中使用类选择器来定义css样式?

comp.html

<div drop-image="cmp.user.image">
</div>

comp.css

.drop-image {
  border: solid 2px red;
}

drop-image。飞镖(NgDirective-file)

void onDragOver(){
  element.classes.add("drop-image");
}

不，你不能，但你可以使用ng-class添加/删除一个CSS类，并添加一些特定于该类的CSS到你的页面。NgComponent可以引用一个CSS，因为ShadowDOM阻止了页面的CSS被应用到它的内容中。

Gunter的回答激发了我对这个问题进行更多的测试。下面是如何将class或style与NgDirective和NgComponent一起使用的几个示例。

如果你在组件中使用applyAuthorStyles: true，那么放置指令相关类的最佳位置是顶层css文件(如我的示例)。这样一来，只有一个地方可以放置与指令相关的css定义。如果你不使用applyAuthorStyles，那么你必须把css代码放到每个组件的css文件中。

使用element.style.border = "2px solid yellow";也可以很好地工作。当您通过设置element.style.border = "";来删除样式时，以前定义的样式将自动再次应用。

我找不到一个简单的方法来使用ng-class(或任何其他ng-something)与指令。MyComp2使用ng-class和my-directive3，但感觉有点粗糙。也许与Scope有一个更好的方法来分配值ng-class从指令。

编辑:Gunter指出applyAuthorStyles已经或将被弃用。

my_comp.css:

div {
  background-color: lightgray;
}

ok_dir_css.css:

div {
  border: 2px solid black;
  margin: 5px;
}
.test {
  border: 2px solid red;
}

ok_dir_css.html:

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>OK dir css</title>
    <link rel="stylesheet" href="ok_dir_css.css">
  </head>
  <body>
    <div my-directive1><p>Directive1 with css class</p></div>
    <div my-directive2><p>Directive2 with inline style</p></div>
    <my-comp1></my-comp1>
    <my-comp2></my-comp2>
    <script type="application/dart" src="ok_dir_css.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

ok_dir_css.dart:

import 'dart:html';
import 'package:angular/angular.dart';
@NgDirective(
    selector: '[my-directive1]'
)
class MyDirective1 {
  Element element;
  MyDirective1(this.element) {
    element
      ..onMouseOver.listen(mouseOver)
      ..onMouseLeave.listen(mouseLeave);
  }
  void mouseOver(MouseEvent event){
    element.classes.add("test");
  }
  void mouseLeave(MouseEvent event){
    element.classes.remove("test");
  }
}
@NgDirective(
    selector: '[my-directive2]'
)
class MyDirective2 {
  Element element;
  MyDirective2(this.element) {
    element
        ..onMouseOver.listen(mouseOver)
        ..onMouseLeave.listen(mouseLeave);
  }
  void mouseOver(MouseEvent event){
    element.style.border = "2px solid yellow";
  }
  void mouseLeave(MouseEvent event){
    element.style.border = "";
  }
}
@NgDirective(
    selector: '[my-directive3]'
)
class MyDirective3 {
  @NgTwoWay('my-directive3')
  String strClass;
  Element element;
  MyDirective3(this.element, Scope scope) {
    element
        ..onMouseOver.listen(mouseOver)
        ..onMouseLeave.listen(mouseLeave);
  }
  void mouseOver(MouseEvent event){
    strClass = "test";
  }
  void mouseLeave(MouseEvent event){
    strClass = null;
  }
}
@NgComponent(
 selector: 'my-comp1',
 template: r'<div my-directive1><p>my-comp1 with Directive1</p></div><div my-directive2><p>my-comp1 with Directive2</p></div>',
 cssUrl: 'my_comp.css', 
 applyAuthorStyles: true,
 publishAs: 'cmp'
)
class MyComp1 {
}
@NgComponent(
    selector: 'my-comp2',
    template: r'<div my-directive3="cmp.classStr" ng-class="cmp.classStr" ng-mouseover="cmp.over()"><p>my-comp2 with ng-class and Directive3</p></div>',
    cssUrl: 'my_comp.css', 
    applyAuthorStyles: true,
    publishAs: 'cmp'
)
class MyComp2 {
  String classStr;
  void over(){
    print("over");
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MyDirective1);
    type(MyDirective2);
    type(MyDirective3);
    type(MyComp1);
    type(MyComp2);
  }
}
void main() {
  ngBootstrap(module: new MyAppModule());
}

相关内容

最新更新

热门标签：