Angenommen, es gibt ein einfaches Framework zum Anzeigen von Popups:
@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);
}
Dies kann dann folgendermaßen verwendet werden:
// 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);
}
}
...
Gibt es eine Möglichkeit, Stile von nach weiterzuleiten <some-other-component>
, <happy-popup>
ohne sie im Stammverzeichnis der App definieren zu müssen?
quelle
PopupConfig
. Ist es möglich, diestyleUrls
Eigenschaft für eine Komponente zur Laufzeit anzupassen ?styleUrls
zur Laufzeit dynamisch einstellen . Es gibt mehrere Möglichkeiten, dies zu tun. Ich empfehle Ihnen, nachAngular dynamic styleUrls
Ideen zu suchen und herauszufinden, welche am besten zu Ihnen passt. Zur zweiten Frage. In diesem Fall würde ich die freigegebene Popup-Styling-Datei + die Styling-Datei importieren, in der ich die Styles überschreibe, die ich für eine bestimmte Komponente ändern möchte.styleUrls
, besteht darin , zur Laufzeit einen neuen Eintrag an anzuhängen, nicht wahr? Was ist, wenn zwei Popups gleichzeitig angezeigt werden, z. B. eines das andere öffnet und unterschiedlich gestaltet werden muss? Wenn ich das änderestyleUrls
, würde es nicht beides stylen? Schließlich konnte ich keinen guten Artikel darüber finden, wie manstyleUrls
ohne Hacks dynamisch modifiziert . Es scheint von Angular nativ nicht unterstützt zu werden.Da Ihr Popup kein untergeordnetes Element der Komponente ist, die es geöffnet hat, können Sie :: ng-deep nicht verwenden
Das einzige, was meiner Meinung nach funktionieren wird, ist das Entfernen der Ansichtskapselung vom Host, dem Popup und der Komponente, die das Popup öffnet (versuchen Sie nur das Popup und die Komponente, die das Popup zuerst öffnet. Wenn dies nicht funktioniert, entfernen Sie die Kapselung des Hosts auch.)
quelle
header
,main
undfooter
man kann sich leicht Stil solche Komponenten übrigens. Vielleicht kann man versuchen, spezifischere Namen zu verwenden, um Konflikte zu vermeiden, aber ich würde eine Lösung bevorzugen, die die Kapselung beibehält.ViewEncapsulation
ist ein großes Nein-Nein für mittelgroße oder große Anwendungen. Es ist besondere Sorgfalt geboten, da sonst Ihr gesamtes Styling auf lange Sicht durcheinander gerät. (Beispiel: generische Klassennamen). Und ich bin nicht der Meinung, dass dies die einzige Lösung für seine Anforderungen ist.Sie können scss mit Ihrem Code kombinieren
Zuerst müssen Sie die scss-Datei, die Sie für die App freigeben möchten, trennen
Zum Beispiel:
In style1.scss
Dann in style2.scss
Oder Sie können die Liste der scss-Dateien in Ihrem Komponentencode kombinieren, indem Sie sie in der Liste der Arrays definieren
Auf diese Weise können Sie die Unterstützung von config scss für Angular Cli manuell konfigurieren
In angular.json hinzufügen
quelle
@import
Anweisungen. Aber genau wie die Antwort von @Dino frage ich mich, ob es möglich ist, die Stil-URL nicht fest in die Popup-Komponente zu codieren, sondern sie aus der zu lesenPopupConfig
und sie zur Laufzeit irgendwie zuzuweisen.Sie können den Prop-Wert an die Komponente senden, die eine benutzerdefinierte Klasse sein kann, und ihn in Ihr Popop-HTML einfügen. Fügen Sie dann in der scss-Datei zusätzliche CSS-Überschreibungen für eine bestimmte Klasse hinzu. Sie können also für jede benutzerdefinierte Komponente einen benutzerdefinierten CSS-Code haben.
PS: Und ja, ich würde vorschlagen, scss-Datei zu importieren wie:
Es ist einfach besser, CSS von JS + Ihrem CSS-Code zu trennen, dann kann es viel länger sein und alle Styling-Fälle enthalten.
quelle
Zusätzlich zu den bereits erwähnten Methoden würde ich zwei weitere Möglichkeiten vorschlagen, die es zu erkunden gilt:
Da Angular CSS auf Komponenten abdeckt und wir dies auf diese Weise beibehalten möchten, können Sie Ihre Komponentengrenze überschreiten, indem Sie herausfinden, welchen Bereich Angular ihm zugewiesen hat, und CSS mit manuellem Bereich in das globale
<style>
Tag auf der Seite einfügen :@ViewChild ('popupRef') popupRef; ngAfterViewInit () {this.popupRef.nativeElement.attributes [0] .name // Dies hat einen ähnlichen Wert, mit
_ngcontent-tro-c1
dem Sie Ihr gesamtes benutzerdefiniertes CSS erweitern müssen. }}Ein offensichtlicher Nachteil dieses Ansatzes besteht darin, dass Angular das CSS-Management verbirgt und Sie daher auf einfaches JS zurückgreifen müssen, um es zu verwalten. ( ein Beispiel hier )
Persönlich würde ich die zweite Option untersuchen, da sie weniger hackig zu sein scheint
quelle