Question

我正在使用Angular Dart开发一个大项目。 Javascript将使用dart2js从Dart生成。该项目目前针对的是谷歌浏览器，但未来它也适用于Firefox。

在上周推出Google Chrome 35m之前，一切都很顺利。所有Component都打破了样式表。似乎applyAuthorStyles在Google Chrome 35m中无效。

我花了很多时间研究，最后提出了以下解决方案：
在声明useShadowDom: false时使用Component。它让我重构我项目中现有的Component：

删除cssUrl。我必须将每个Component的样式表移动到一个（或多个）样式表文件中，然后将其导入index.html
重新实施每个ShadowRootAware.onShadowRoot，因为该方法不接受ShadowRoot作为其参数
重新测试（当然）

正如您所看到的，如果我应用此解决方案，还有很多额外的工作。

我想知道是否有比我更好的解决方案？

修改

我想我应该解释一下我的代码结构，以帮助每个人更好地理解我的问题。

我的项目中有很多Component。每个Component有3个文件：1个CSS文件（作用域），1个HTML文件和1个dart文件
我有一些全局CSS文件，并在条目HTML页面（index.html）
在Chrome 35m中，Component中的HTML没有来自全局CSS的样式，即使我设置applyAuthorStyles: true（applyAuthorStyles已弃用）

我只需要使用全局CSS（例如来自CSS框架）来设置样式Component的解决方案，只需要进行最少的代码更改。

Answer 1

我不这么认为。

如果您不使用shadow DOM，则无法使用作用域。

一个替代方法是保留shadow DOM并更改您应用于页面的CSS，以使其与shadowDOM一起使用（例如，添加/deep/组合器）。

注意：applyAuthorStyles已经被弃用了几个月。

一段时间以来，Angular.dart通过将参数useShadowDom: false添加到@Component来支持创建没有shadow DOM的组件。

Answer 2

我不会说在Angular.dart项目中使用全局css文件设置样式的好方法，但我找到了一个适用于我的工作。

我的索引文件是我的主要组件的瘦包装器。然后我创建了一个文件夹，如：lib/component/css/sass。在sass中，我创建了所有css文件的scss部分（只需将其从myCss.css重命名为_myCss.scss）并创建了一个导入所有这些文件的主scss文件lg-global.scss泛音：

@import "pure-side-menu";
@import "pure-min";
@import "grids-responsive-min";

{... my css rules}

我已经设置指南针将我的scss文件编译为css文件夹中的单个css文件，现在我可以在我的组件中导入该单个文件，如下所示：

@Component(
    selector: 'main-menu',
    templateUrl: 'main_menu.html',
    cssUrl: 'css/lg-global.css')

如果我确实想要为组件提供专门的css文件，那也很容易。只需创建一个新的scss文件，然后导入你想要的任何scss部分。

这是一项额外的工作，但无论如何scss都要好得多。我唯一真正关心的是在每个组件中使用大量的css文件是否会导致性能不佳。

AngularDart - 如何使用Google Chrome 35m中的全局CSS设置样式组件（不推荐使用applyAuthorStyles）

2 个答案: