如何最终使用多个 CSS 文件设置 AngularDart 组件的样式答案

【问题标题】：How to style a AngularDart component using eventually multiple CSS files如何最终使用多个 CSS 文件设置 AngularDart 组件的样式
【发布时间】：2013-12-17 02:18:44
【问题描述】：

我想知道设置 AngularDart 组件样式的最佳方式是什么？我希望能够将基本样式拆分为一个单独的 CSS 文件，然后以某种方式将其包含在我的组件中（可能是 @import，如果 angular dart 支持它）。

标准NgComponent 只允许我添加一次 CSS 文件，如下例所示：

@NgComponent(
  selector: 'rating',
  templateUrl: 'packages/angular_dart_demo/rating/rating_component.html',
  cssUrl: 'packages/angular_dart_demo/rating/rating_component.css',
  publishAs: 'ctrl',
  map: const {
    'max-rating': '@maxRating',
    'rating': '<=>rating'
})

如果我的 CSS 以某种方式拆分到多个文件中，我该如何将它们全部包含在一个组件中？

目前，我开始注意到，尽管 AngularDart 组件有助于使组件可重用，但它们并不是最易于维护的——CSS 中有很多复制粘贴。如果可以拆分样式，则组件的可维护性将大大提高（即，可以在多个组件中包含基本样式 - 而不是在每个组件的每个 css 文件中复制粘贴它们）。

在 AngularDart 环境中构建组件和 css 的最佳方式是什么？

【问题讨论】：

为什么这是 Dart 的问题？使用语义命名空间 - 给元素一个类，“baseComponent”，并根据需要提供几个额外的类。
我同意给元素不同的类。但是因为我想在不同的 NgComponent 元素中重用同一个类，所以我别无他法，只能复制粘贴，或者制作一个巨大的 css 文件并将所有内容放在那里，然后在每个组件中包含该文件 - 这是一种令人讨厌的方法。或者，也许您知道实现这一目标的方法？ @david-souther
手写笔 / sass / less。（我不知道 AngularDart 和 NgComponent 是如何工作的——我是一名咖啡师。我只是觉得它的 css 中似乎完全缺乏模块化有点奇怪。）

标签： css angularjs dart angular-dart shadow-dom

【解决方案1】：

好的，这就是答案。要将 CSS 放入组件中，您可以使用

@import 在你的 CSS 中
cssUrls 参数 - https://github.com/angular/angular.dart/pull/315

【讨论】：

【解决方案2】：

属性cssUrl和applyAuhtorStyles可以同时应用，如下图。如您所见，除了继承父样式（例如引导程序）之外，您还可以添加仅在组件范围内可用的组件特定样式（cssUrl）。

@NgComponent(
selector: 'paginate',
templateUrl: 'component/paginate/paginate_component.html',
cssUrl: 'component/paginate/paginate_component.css',
applyAuthorStyles: true,
publishAs: 'ctrl',
map: const {
  'page-filter-map' : '<=>pageFilterMap'
}

)

还可以使用称为 cssStyle 的指令来添加更多控制，如下所示。

<span ng-style="{color:'red'}">Sample Text</span>

【讨论】：

仍然没有解决问题。作者样式来自外部，我需要在组件内隔离所有样式。

【解决方案3】：

如果你看这里：

https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_04/lib/rating

在组件的 .dart 文件中有一个注解，其中包含属性 cssUrl。我不确定，但我认为这会将文件耦合到封装的 Web 组件 css。

@NgComponent(
    selector: 'rating',
    templateUrl: 'packages/angular_dart_demo/rating/rating_component.html',
    cssUrl: 'packages/angular_dart_demo/rating/rating_component.css',
    publishAs: 'ctrl',
    map: const {
      'max-rating' : '@maxRating',
      'rating' : '<=>rating'
    }
)

请注意，为了使此 packages/ 链接正常工作，您需要将文件放在 /lib 文件夹中。

【讨论】：

我已经看过了。我的问题更像是有没有办法让我以某种方式在多个 css 文件中定义样式，并以某种方式将它们全部包含在组件中。
我认为目前还没有这样的选择，看起来像是 Angular.dart GitHub 上的功能请求的候选者，尽管组件是被隔离的。我认为现在解决这个问题的唯一方法是将注释中的 cssUrl 替换为 applyAuthorStyles: true。