Como aplicar classes CSS a outro componente no AngularDart?

Digamos que exista uma estrutura simples para exibir pop-ups:

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

Isso pode ser usado assim:

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

Existe uma maneira de encaminhar estilos de <some-other-component>para <happy-popup>sem precisar defini-los na raiz do aplicativo?

Você pode conseguir isso dividindo o código dos componentes em arquivos separados - ou em um arquivo CSS separado no seu caso.

Em vez de escrever o estilo diretamente no componente - styles, você importaria o arquivo CSS usando o styleUrls. Dessa forma, você pode passar um arquivo com seus estilos e o arquivo pode ser compartilhado entre vários componentes.

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

Lembre-se de que os URLs em styleUrls são relativos ao componente.

Outro benefício de importar o css styleUrlsé que ele também concede a capacidade de usar importações nesse arquivo.

hero1.css

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

FYI: É uma prática comum dividir o código dos componentes em arquivos separados.

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

E então no seu arquivo dardo referencie-os como:

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

Consulte AngularDart - Estilos de componentes para obter informações breves sobre isso.

Como seu pop-up não é filho do componente que o abriu, você não pode usar :: ng-deep

a única coisa que acho que funcionará é remover o encapsulamento de exibição do host, o pop-up e o componente que abre o pop-up (tente apenas o pop-up e o componente que abre o pop-up primeiro, se isso não funcionar, remova o encapsulamento do host também.)

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

Você pode combinar scss com seu código

Primeiro, você precisa separar o arquivo scss que deseja compartilhar no aplicativo

Por exemplo:

Em style1.scss

.header { font-weight: bold }

Em seguida, em style2.scss

@import "style1"

Ou você pode combinar a lista de arquivos scss no código do componente, definindo na lista de matriz

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

• Nota: Altere o caminho de acordo com o caminho do arquivo e isso só funcionará quando você usar scss e não css

Isto é como você pode configurar manualmente o suporte do scss para o angular cli

Em angular.json, adicione

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

Você pode enviar um valor prop para o componente, que pode ser uma classe personalizada e colocá-lo no seu pop-up html. E então, no arquivo scss, adicione substituições extras de css para uma classe específica. Portanto, para cada componente personalizado, você pode ter um código CSS personalizado.

PS: E sim, eu sugeriria importar arquivos scss como:

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

É melhor separar css de js + seu código css, pois pode demorar muito mais, contendo todos os casos de estilo.

Além dos métodos já mencionados, sugiro mais dois caminhos a serem explorados:

1. desde que o Angular seleciona o CSS para os componentes e gostaríamos de mantê-lo dessa maneira, o limite do componente de cruzamento pode ser feito, descobrindo qual escopo o Angular atribuiu a ele e adicionando CSS com escopo manual à <style>tag global na página:

   @ViewChild ('popupRef') popupRef; ngAfterViewInit () {this.popupRef.nativeElement.attributes [0] .name // isso terá um valor semelhante ao _ngcontent-tro-c1qual você precisará definir todo o seu CSS personalizado. }

Uma desvantagem aparente dessa abordagem é que a Angular oculta o gerenciamento de CSS e, portanto, você precisará recorrer ao JS simples para gerenciá-lo. ( um exemplo aqui )

2. você pode tentar definir o CSS no @Component antes de criá-lo, utilizando a fábrica de decoradores personalizados, como nesta resposta

Pessoalmente, eu exploraria a segunda opção, pois parece ser menos invasiva