Vous pouvez ajouter différents fichiers css dans le composant (par exemple, app-task.component.ts):

@Component({
  selector: 'app-task',
  templateUrl: './app-task.component.html',
  styleUrls: ['./app-task.component.scss', './styles2.scss', './styles3.scss']
})

Dans cet exemple, les fichiers de style sont dans le même dossier que le composant, mais ce n'est pas la meilleure option: vous devez par exemple placer les fichiers dans des assets. Faites également attention au filetage des styles, puisque le premier que vous mettez sera placé avant le second (évidemment).

Ne changez pas tout le corps de la pomme. Au lieu de cela, il y a quelques changements à apporter.

1. Dans le composant d'application, maintenez une valeur booléenne indiquant si vous êtes ou non sur apple et utilisez ngClass pour la classe définie dans scss.

2. Suivez l'itinéraire sur lequel vous vous trouvez dans appComponent et définissez isApple en conséquence

3. Ajoutez un div autour de tout votre html, pour que le conteneur prenne sa taille réelle

4. Ajoutez du code HTML global, définissez la hauteur du corps à 100% pour voir la couleur partout

5. Supprimer le remplacement du corps dans Apple

donc, appComponent.ts:

html, body {
  height: 100%;
}

appComponent.html:

/*Sample "global" CSS, that affects something outside the current component.*/
::ng-deep {
  @media print {
    @page {
      margin: 0;
    }
  }
}

appComponent.scss

.red {
  background-color: red;
}

.container {
  height: 100%;
}

apple.component.scss (supprimer le corps)

<div [ngClass]="{'red':isApple}" class="container">
    <p>
        There are two components: Apple and Banana. Switching between them will show
        the problem.
    </p>

    <router-outlet></router-outlet>
</div>

styles.scss (global)

  isApple: Boolean;
  constructor(router: Router) {
    router.events.subscribe(v => {
      if (v instanceof NavigationEnd) {
        this.isApple = v.url === "/apple";
      }
    });
  }

Vous pouvez voir tout cela sur ce lien Stackblitz

Angular effectue un rendu côté client, ce qui est une mauvaise nouvelle, car vous n'avez pas de pages séparées. Vous avez cependant plusieurs solutions possibles:

1. Page séparée

Vous pouvez créer une autre page avec ou sans Angular, qui comprend le CSS dont vous avez besoin et charger cette page. Dans l'approche la plus simpliste pour y parvenir, l'autre page aurait une URL différente. Si avoir une URL différente ne vous convient pas, vous pouvez masquer le contenu de votre page et afficher l'autre page dans un iframe . Ce serait certes une solution pirate, mais c'est une solution.

2. Rendu CSS côté client

Au lieu de simplement charger le CSS, vous pourriez avoir un composant qui contrôlerait les règles CSS globales, correspondant au nom de votre vue. Vous auriez une valeur de modèle rendue à une propriété, comme:

body.custom-print {
    margin: 30px;
}

Et lorsque vous visitez la page où cela doit être activé, vous initialiserez simplement une propriété avec un élément HTML de style qui a été généré en fonction du modèle et ajouté à l'en- head . Une fois que vous quittez la vue donnée, votre composant détecte cet événement et remove() cet élément. Si vous choisissez cette solution, il serait sage de vous assurer que vous la soutenez de manière plus générale, de sorte que si certaines nouvelles vues auront leur CSS global personnalisé, elles seront alors faciles à intégrer dans votre projet à l'avenir. .

3. cours de corps

Vous pouvez ajouter / supprimer une custom-print ou n'importe quelle classe dans le body chaque fois que le style doit être modifié. De cette façon, vous pouvez ajouter le CSS exactement une fois à votre HTML et modifier les règles en conséquence, comme:

`
@media print{
    @page{
        margin:0;
    }
    body{
        margin:30px;
    }
}
`

Ce serait une solution @page , mais le problème dans votre cas est que vous avez également une règle @page et je ne sais pas comment vous pourriez la rendre dépendante des classes de corps ou de certains autres attributs HTML. Je ferais pas mal d'expériences à ce sujet si j'étais vous.

4. Mise en scène Iframe

Vous pourriez éviter d'avoir ce CSS dans votre page principale, mais auriez un iframe caché où vous auriez le CSS et copieriez simplement le contenu dans le CSS et une fois qu'il est chargé, imprimez-le.

Résolu! Via DomSanitizer.bypassSecurityTrustHtml

Voici un StackBlitz .

Tout d'abord, créez un nouveau composant pour gérer le travail:

<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>

Et puis utilisez-le comme ceci:

mySample.component.html:

component.ts: (This is all we need. We don't need an HTML or style.css file.)
//Inside  your local component, place this HTML 
//<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
//<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>

@Component({
  selector: "app-local-css",
  template: '<span style="display:none" [innerHTML]="this.safeString"></span>'
})
export class LocalCSSComponent implements OnInit {
  constructor(protected sanitizer: DomSanitizer) {}
  @Input() scriptURL?: string;
  @Input() style?: string;

  safeString: SafeHtml;
  ngOnInit() {
    if (this.scriptURL) {
      let string = '<link rel="stylesheet" type="text/css" href="' + this.scriptURL + '">';
      this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
    } else if (this.style) {
      let string = '<style type="text/css">' + this.style + "</style>";
      this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
    }
  }
}

Cela fonctionne parce que le CSS se trouve à l'intérieur du HTML, et par conséquent, lorsque le composant sera détruit, ce sera aussi le cas. (Angular ne tentera pas de modifier cela à cause de bypassSecurityTrustHtml )