angular - 如何将 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 中编写样式，您将使用 styleUrls 导入 CSS 文件。 .这样您就可以传递带有样式的文件，并且该文件可以在多个组件之间共享。

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

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

使用 styleUrls 导入 css 的另一个好处是因为它还授予您在该文件中使用导入的能力。

英雄1.css

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

FYI: It's a common practice to split your components code into separate files.

hero.dart

hero.css

hero.html

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

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

请引用 AngularDart - Component Styles有关这方面的简要信息。