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

Question

我想知道为AngularDart组件设置样式的最佳方法是什么？我希望能够将基本样式拆分为单独的CSS文件，然后在我的组件中以某种方式包含它（可能是@import，如果有角度的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的最佳方法是什么？

Answer 1

属性cssUrl和applyAuhtorStyles都可以同时应用，如下所示。如您所见，除了继承父样式（例如bootstrap）之外，您还可以添加仅在组件范围中可用的组件特定样式（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>

Answer 2

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

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

Answer 3

如果你看这里：

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

在组件的.dart文件中，有一个包含属性cssUrl的注释。我不确定，但我认为这将文件耦合到封装的Web Component 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'
    }
)

请注意，为了使这个包/链接起作用，您需要将文件放在/ lib文件夹中。