是否可以将 css 文件与 NgDirective 一起使用答案

【问题标题】：Is it possible to use css-file with NgDirective是否可以将 css 文件与 NgDirective 一起使用
【发布时间】：2014-03-23 06:29:44
【问题描述】：

我有一个NgComponent 和一个NgDirective，我想将它们与组件一起使用。我的指令（drop-image）为组件的 div 添加了拖放区功能。我还想添加区域的视觉指示（红色边框）。

我知道我可以在指令中的函数中使用element.style.border = "2px solid red"，但是像这样添加和删除样式感觉不对（例如，如果元素已经具有边框样式，则可能会造成麻烦）。

另一种方法是将类选择器 (.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 文件）

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

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

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

【讨论】：

我找不到使用ng-classwith 指令的简单方法。我添加了一个新答案，其中有几个不同解决方案的示例。
刚开始阅读并想通知您applyAuthorStyles 已被弃用并将很快被删除，但我最近听说将 NgTransclude 移植到 AngularDart 正在取得良好进展。
如果您不能使用 ng-class，您可以将 Element 注入您的指令并直接设置类 element.classes.add('someclass');
很高兴知道applyAuthorStyles 弃用，谢谢。我已经在我的示例中使用了元素注入 :)
我是在添加评论后看到的。

【解决方案2】：

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

如果您将applyAuthorStyles: true 与组件一起使用，那么放置指令相关类的最佳位置是顶级css 文件（如我的示例中所示）。这样，只有一个地方可以放置与指令相关的 css 定义。如果你不使用applyAuthorStyles，那么你必须把css-code放到每个组件的css-file中。

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());
}

【讨论】：