首页 文章

Dartlang：如何允许第三方使用模拟封装来设置angular2组件的样式？

提问于
浏览 次
4

Disclaimer for the mods: 这并没有要求就最佳方式提出意见，这就要问一个方法，如何解决这个问题 .

问题

让我们想象一下，我想为我的项目编写一个材质设计风格按钮组件 . （我知道，这已经可以使用，但这仅用于说明目的 . ）
我将按钮组件设置为普通的dart库项目，工作正常 . 现在我想在另一个angular2 app中使用这个材质按钮组件，所以我将它添加到pubspec.yaml并将其作为指令依赖项插入到我的新app-component中 .

问题是，如何从外部更改此按钮的悬停颜色？

由于我的组件应该使用样式封装（模拟样式），因此不能简单地全局设置样式 .

可能的解决方案

使用自定义CSS属性

这在理论上是好的，然而，它们尚未在所有浏览器中发货，并且没有 生产环境 就绪的垫片 . 为此，有人会在组件内部定义自定义css属性并在外部设置它们的值 .

使用输入属性进行可调样式设置

只需为应更改的样式提供我的按钮组件输入属性 . 这确实有效，但仅适用于那些不包含css伪选择器的样式，例如：hover，因为它无法更改：每个javaScript都悬停样式，因此也不是dart . 有人可以在javascript / dart中编写：hover函数来允许这种样式更改，但这看起来很糟糕，因为它只是复制了css引擎中的可用代码 .

使用普通的css链接和原生阴影dom

这个适用于本机阴影dom，因为组件内部的样式链接标记由按钮组件的customCssPath属性填充，会将样式正确加载到组件中 . 但是，由于shadowdom在所有浏览器中都不是原生的，因此我们无法可靠地使用它 . 所以我们现在被迫使用模拟封装 .

angular dart angular-dart

1 回答

  • 8

    解决方案 - 使用SASS（非常感谢Matan Lurey！）

    当直接询问Angular2 Repo时，Angular2开发者之一Matan Lurey提供了一些关于如何使用Sass mixins来进行所需样式操作的指南 .

    人们可以在这里找到原始主题：https://github.com/dart-lang/angular2/issues/154

    解决方案详情：

    但是，由于我发现实现起来并不是很简单，所以这里有一些关于如何实现这项工作的更多细节：

    • 想象一下，我们有以下文件 internal_component.dart ：
    import 'package:angular2/angular2.dart';

@Component(
  selector: 'internal-component',
  styleUrls: const ['internal_component.css'],
  templateUrl: 'internal_component.html',
)
class InternalComponent {}
    • 此组件具有此模板文件 internal_component.html ：
    <div>
  Some Text
</div>
    • 这个sass样式文件 internal_component.sass ：
    div {
  background-color: #ffff00;
}

@mixin internal-component-background($selector, $color) {

  polyfill-unscoped-rule {
    background-color: $color;
    content: '#{$selector} > div'
  }
}
    • 在其他组件中包含 internal-component （此处为 app_component.dart ）：
    import 'package:angular2/core.dart';
import 'package:sass_internal_styles/internal_component/internal_component.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [InternalComponent],
)
class AppComponent {}
    • 模板文件 app_component.html 内：
    <internal-component id="comp1"></internal-component>
<internal-component id="comp2"></internal-component>
    • 最后，在`app_component.scss中：
    @import "../lib/internal_component/internal_component.scss";
@include internal-component-background($selector: '#comp2', $color: red);

    会发生什么：

    • 字符串"Some Text"将显示两次，字符串，如 internal_component.html 中所示，两次见于 app_component.html

    • 第一个字符串将具有黄色背景，如 internal_component.scss 中所定义 . This can be used for defining default values inside the components!

    • 第二个字符串将具有红色背景，由 app_component.scss 中包含的mixin定义 .

    有一点需要注意：

    给mixin的选择器必须出现在使用内部组件的模板内部 . 在我们的例子中，这是 app_component.html 内的 id=comp2 属性

    更新1：另一件需要注意的事项：

    使用[attribute] css选择器而不是.class选择器和 be aware of the css selector strength hirarchy!

    通过将属性应用于组件的标记来“规范”常规组件样式，并将此组件的样式仅应用于组件选择器以及作用域的属性 . 由于elem [attribute] -css规则比简单类选择器具有更多的强度，因此类选择器将不起作用 . 但是，您可以尝试在类之前指定元素名称来解决此问题 .

    您还可以将.class选择器与！important结合使用 . 但是，只有在您知道其含义的情况下才能这样做！例如：相同元素的hover选择器将不再正常工作，因为！important优先 .

    为什么这可行：

    polyfill-unscoped-rule 块被编译进去

    #comp2 > div {
    background-color: red;
}

    在 app_component.css 文件的样式块内 . （因为样式表将通过angular2移动到模拟模式下的 Headers ）style-encapsulation只是模拟的，这个内部 div 的子选择器工作得很好 .

    Update 1: The polyfill-unscoped-rule block compiling is done by webcomponents.js! :)

    有人可能会争辩说，这个伎俩也可以从外面完成而不用sa . 这是正确的，但是，使用mixin技术，组件的用户不需要深入了解组件的内部结构 . 他可以使用一些不错的Sass mixins，这应该记录在组件的自述文件中 .

    回复于

相关问题