3

我想知道设置 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 的最佳方法是什么？

4

3 回答 3

4

属性 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>
于 2013-12-03T19:59:53.463 回答
1

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

  1. @import 在你的 CSS 中
  2. cssUrls 参数 - https://github.com/angular/angular.dart/pull/315
于 2013-12-13T10:43:52.293 回答
0

如果你看这里：

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 文件夹中。

于 2013-12-01T13:01:39.170 回答