如何将 CSS 类应用于 AngularDart 中的另一个组件？

Question

假设有一个简单的框架来显示弹出窗口：

@Component(
  selector: 'popup-host',
  template: '''
      <div class="popup-container">
        <ng-template #popupRef></ng-template>
      </div>
  ''',
  styles: ['.popup-container { position: absolute; top: 100; left: 100; z-index: 100; }'],
)
class PopupContainerComponent {
  final PopupController _controller;
  final ComponentLoader _loader;

  PopupContainerComponent(this._controller, this._loader);

  void ngOnInit() {
    _controller.container = this;
  }

  @ViewChild('popupRef', read: ComponentRef)
  ComponentRef popupRef;

  void render(PopupConfig config) {
    final componentRef = _loader.loadNextTo(config.factory, popupRef);
    if (componentRef.instance is HasValueSetter) {
      componentRef.instance.value = config.value;
    }
  }
}

@Injectable()
class PopupController {
  PopupContainerComponent _container;
  set container(PopupContainerComponent container) => _container = container;

  void showPopup(PopupConfig config) {
    container.render(config);
  }
  ...
}

class PopupConfig {
  final ComponentFactory factory;
  final dynamic value;
  PopupConfig(this.factory, [this.value]);
}

abstract class HasValueSetter {
  set value(dynamic value);
}

然后可以这样使用：

// Somewhere in the root template
<popup-host></popup-host>

// In popup.dart
@Component(
  selector: 'happy-popup',
  template: '''
      <div class="header">This is the popup content.</div>
      <div class="main">The value is {{value}}.</div>
      <div class="footer">I am happy!</div>
  ''',
)
class HappyPopupComponent implements HasValueSetter {
  @override
  dynamic value;
}

// In some_other.dart
@Component(
  ...
  styles: [
    '.header { font-weight: bold }',
    '.main { color: red }',
    '.footer { color: green; font-style: italic }',
  ],
  ...
)
class SomeOtherComponent {
  final PopupController _popupController;
  ...
  SomeOtherComponent(this._popupController, ...) ...;

  void displayPopup() {
    _popupController.showPopup(HappyPopupComponentNgFactory, 42);
  }
}
...

有没有办法将样式从<some-other-component>转发到<happy-popup>而不必在应用程序的根目录中定义它们？

Answer 1

您可以通过将组件代码拆分为单独的文件来实现这一点 - 或者在您的情况下使用单独的 CSS 文件。

而不是写在组件的风格直- styles ，你会通过导入CSS文件styleUrls 。 这样您就可以传递带有样式的文件，并且该文件可以在多个组件之间共享。

@Component(
      styleUrls: ['./hero1.css', './folder/hero2.css'],
)

请记住，styleUrls 中的 URL 是相对于组件的。

使用styleUrls导入 css 的另一个好处是它还允许您在该文件中使用导入。

英雄1.css

@import './folder/hero2.css';

仅供参考：将组件代码拆分为单独的文件是一种常见做法。

• 英雄飞镖
• 英雄.css
• 英雄.html

然后在您的 dart 文件中将它们引用为：

@Component(
      templateUrl: './hero.html',
      styleUrls: ['./hero.css'],
)

有关这方面的简要信息，请参阅AngularDart - 组件样式。

Answer 2

由于您的弹出窗口不是打开它的组件的子项，因此您不能使用 ::ng-deep

我认为唯一可行的是从主机、弹出窗口和打开弹出窗口的组件中删除视图封装（仅尝试首先打开弹出窗口的弹出窗口和组件，如果不起作用，请删除主机的封装还有。）

@Component(
  selector: 'happy-popup',
  template: '''
      <div class="header">This is the popup content.</div>
      <div class="main">The value is {{value}}.</div>
      <div class="footer">I am happy!</div>
  ''',
  encapsulation: ViewEncapsulation.None // <=== no encapsulation at all
)
class HappyPopupComponent implements HasValueSetter {

Answer 3

您可以将 scss 与您的代码结合使用

首先，您需要将要在整个应用程序中共享的 scss 文件分开

例如：

在 style1.scss 中

.header { font-weight: bold }

然后在style2.scss

@import "style1"

或者您可以通过在数组列表中定义来组合组件代码中的 scss 文件列表

styleUrls: ['./style1.scss', './style2.scss'],

• 注意：请根据您的文件路径更改路径，并且这仅在您使用 scss 而不是 css 时有效

这是您如何手动配置 scss 对 angular cli 的支持

在 angular.json 添加

"projects": {
        "app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": { // add this config
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },

Answer 4

您可以将 prop 值发送到组件，该组件可以是自定义类并将其放入您的 popop html 中。 然后在 scss 文件中为特定类添加额外的 css 覆盖。 因此，对于每个自定义组件，您都可以拥有自定义 css 代码。

PS：是的，我建议导入 scss 文件，如：

@Component(
      styleUrls: ['./hero1.css'],
)

将 css 与 js + css 代码分开会更好，然后可以更长，包含所有样式情况。

Answer 5

除了已经提到的方法之外，我还建议探索另外两条途径：

1. 因为 Angular 将 CSS 范围限定为组件，我们希望保持这种方式，您可以通过找出 Angular 分配给它的范围并将手动范围的 CSS 添加到页面上的全局<style>标记中来完成跨组件边界：

   @ViewChild('popupRef') popupRef; ngAfterViewInit() { this.popupRef.nativeElement.attributes[0].name // 这将有一个类似于_ngcontent-tro-c1 ，你需要用它来_ngcontent-tro-c1所有自定义 CSS。 }

这种方法的一个明显缺点是 Angular 隐藏了 CSS 管理，因此您必须求助于普通的 JS 来管理它。 （ 此处举一个例子）

2. 您可以在创建之前尝试在 @Component 中定义 CSS，使用自定义装饰器工厂， 如本答案

就我个人而言，我会探索第二个选项，因为它似乎不那么笨拙