Comment appliquer de la classe css à un élément de composant lorsqu'il est créé par le routeur de sortie?

En supposant que vous voulez toujours la classe appliquée à ce composant, vous pouvez utiliser host dans votre composant de métadonnées:

@Component({
  selector:'project',
  host: {
      class:'classYouWantApplied`
  }
})

Résultant dans:

<app>
    <router-outlet></router-outlet>
    <project class="classYouWantApplied">...</project>
</app>

utiliser le adjacent sibling selector et la * générique pour sélectionner l'élément suivant immédiatement la router-outlet

les styles.css

router-outlet + * {
  /* your css */
}

Vous pouvez le faire avec un HostBinding, qui est effectivement le même que l'utilisation de la host propriété qui a déjà été mentionné, bien que cette méthode renvoie une TSLint erreur par défaut de règlement de cotation.

Dans votre composant sur lequel vous souhaitez appliquer une classe:

import { Component, HostBinding, Host (optional for typing) } from '@angular/core';

@Component({...})
export class GiveMeAClassComponent {
    @HostBinding('class.some-class') someClass: Host = true;
    ...
}

Et ensuite dans le répertoire racine de votre styles.scss fichier, vous pouvez ajouter les éléments suivants:

.some-class {
    //Styles in here will now be applied to your GiveMeAClassComponent at a root level
}

<app>
  <div class="your css class">
   <router-outlet></router-outlet>
</div>
</app>

Cela fonctionne pour moi

J'ai créé un RouterOutletHelperDirective qui peuvent être modifiés au besoin.

Votre cas d'utilisation peut être différente, mais pour moi :

• J'avais besoin de définir un ensemble par défaut des classes sur chaque routeur de sortie généré élément
• J'avais besoin de empêcher cette valeur par défaut en fonction de certaines conditions, telles que ActivatedRoute de données.

Vous l'utilisez comme ceci (la classe est facultatif):

<router-outlet routerOutletHelper
               [routerOutletHelperClass]="'blue-border'"></router-outlet>

Puis créer la directive, d'ajouter et de les exporter vers votre application module.

import { Directive, ElementRef, Renderer2, Input } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { Subscription } from "rxjs";

@Directive({
    selector: 'router-outlet[routerOutletHelper]'
})
export class RouterOutletHelperDirective
{
    constructor(private routerOutlet: RouterOutlet,
                private element: ElementRef<HTMLElement>,
                private renderer: Renderer2) { }

    subscription = new Subscription();

    @Input('routerOutletHelperClass')
    customClassName: string | undefined;

    ngOnInit() 
    {
        this.subscription.add(this.routerOutlet.activateEvents.subscribe((_evt: any) => {

            //find the component element that was just added
            const componentElement = this.element.nativeElement.nextSibling;

            //add a custom class
            if (this.customClassName) 
            {
                this.renderer.addClass(componentElement, this.customClassName);
            }

            //add my default classes, unless the activated route data 
            //(specified in module routing file) has { addDefaultClasses: false }
            if (this.routerOutlet.activatedRouteData && this.routerOutlet.activatedRouteData.addDefaultClasses !== false)
            {
                //these are my application's default classes (material /theming)
                //(an additional data parameter could be 'darkTheme: boolean')
                this.renderer.addClass(componentElement, 'mat-typography');
                this.renderer.addClass(componentElement, 'rr-theme-light');
            }
        }));
    }

    ngOnDestroy()
    {    
        this.subscription.unsubscribe();
    }
}