Question

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

我知道我可以在指令中的函数中使用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.dart（NgDirective-file）

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

Answer 1

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

Answer 2

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，但感觉有点hacky。也许使用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());
}

是否可以将css-file与NgDirective一起使用

2 个答案: