¿Cómo aplicar clases CSS a otro componente en AngularDart?

Digamos que hay un marco simple para mostrar ventanas emergentes:

@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);
}

Esto se puede usar así:

// 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);
  }
}
...

¿Hay alguna forma de reenviar estilos desde <some-other-component>hasta <happy-popup>sin tener que definirlos en la raíz de la aplicación?

Puede lograr esto dividiendo el código de sus componentes en archivos separados, o en un archivo CSS separado en su caso.

En lugar de escribir el estilo directamente en los componentes styles, importaría el archivo CSS utilizando styleUrls. De esa manera puede pasar un archivo (s) con sus estilos, y el archivo se puede compartir entre múltiples componentes.

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

Tenga en cuenta que las URL en styleUrls son relativas al componente.

Otro beneficio de importar el CSS con styleUrlses que también le otorga la posibilidad de utilizar las importaciones dentro de ese archivo.

hero1.css

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

FYI: Es una práctica común dividir el código de sus componentes en archivos separados.

• hero.dart
• hero.css
• hero.html

Y luego, en su archivo dart, haga referencia a ellos como:

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

Consulte AngularDart - Estilos de componentes para obtener información breve sobre esto.

Como su ventana emergente no es un elemento secundario del componente que lo abrió, no puede usar :: ng-deep

lo único que creo que funcionará es eliminar la encapsulación de vista del host, la ventana emergente y el componente que abre la ventana emergente (pruebe solo la ventana emergente y el componente que abre la ventana emergente primero, si eso no funciona, elimine la encapsulación del host también.)

@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 {

Puedes combinar scss con tu código

Primero debe separar el archivo scss que desea compartir en la aplicación

Por ejemplo:

En style1.scss

.header { font-weight: bold }

Luego en style2.scss

@import "style1"

O puede combinar la lista de archivos scss en su código de componente definiendo en la lista de matriz

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

• Nota: Cambie la ruta de acuerdo con su ruta de archivo y esto solo funciona cuando usa scss no css

Así es como puede configurar manualmente el soporte de scss para angular cli

En angular.json agregar

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

Puede enviar el valor de prop al componente, que puede ser una clase personalizada y ponerlo en su popop html. Y luego, en el archivo scss, agregue anulaciones css adicionales para una clase específica. Entonces, para cada componente personalizado, puede tener un código CSS personalizado.

PD: Y sí, sugeriría importar un archivo scss como:

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

Es mejor separar css de js + su código css, entonces puede ser mucho más largo y contener todos los casos de estilo.

Además de los métodos ya mencionados, sugeriría dos vías más para explorar:

1. desde el ámbito angular de CSS a los componentes y nos gustaría mantenerlo de esta manera, el límite del componente de cruce se puede hacer descubriendo qué alcance Angular le asignó y agregando CSS de ámbito manual en global <style> etiqueta en la página:

   @ViewChild ('popupRef') popupRef; ngAfterViewInit () {this.popupRef.nativeElement.attributes [0] .name // esto tendrá un valor similar al _ngcontent-tro-c1que necesitarás para abarcar todo tu CSS personalizado. }

Un inconveniente aparente de este enfoque es que Angular oculta la administración de CSS y, por lo tanto, tendrá que recurrir a JS para administrarlo. ( un ejemplo aquí )

2. puede intentar definir el CSS en @Component antes de crearlo utilizando una fábrica de decoradores personalizados como en esta respuesta

Personalmente, exploraría la segunda opción, ya que parece ser menos hacky