css - Delte stiler på tvers av komponenter i en Angular 2-app

Jeg har noen CSS-regler i Angular 2-appen min som vil være vanlige på tvers av ulike komponenter. Selvfølgelig vil jeg ikke kopiere og lime dem inn i hver komponents stiler. Jeg har for øyeblikket 2 ideer:

  1. Plasser vanlige CSS-regler i en statisk CSS-fil og inkluder den ved å bruke en lenke i head-seksjonen i index.html-filen min.
  2. Plasser mine vanlige CSS-regler i en eller flere filer og inkluder dem i @Component-deklaratoren for hver komponent, f.eks. styleUrls: [ './myComponentStyle.css', '../common/common.css']

Første tilnærming ser ikke så kantete ut for meg, men samtidig er den sikker på å fungere og enkel å implementere.

Den andre krever at noe arbeid gjøres med hver komponent, men gir mer kontroll over hvilke stiler som brukes av en. Den lar meg også organisere mine vanlige stiler i mindre stilark og bruke bare de som trengs.

Foretrekker du noen av de løsningene, eller finnes det en tredje, bedre en? :)

Svar #1

1. Denne løsningen er god, men den er mer egnet for vanlige stiler, som bør være tilgjengelige for alle komponenter. For eksempel stiler for CSS-rutenett. For å gjøre det mer angular-aktig kunne du sette kapsling for app-komponenten din til ingen:

`@Component({
     selector: 'my-app',
     template: `  `,
     styleUrls: ["shared.style.css"],
     encapsulation: ViewEncapsulation.None
}) export class App {}`

Demoen kan finnes her (plunker)

Merk: Stiler som inkluderes på denne måten (bare ved å legge til stiltagg, eller uten innkapsling) vil påvirke alle elementer på sidene dine. Noen ganger er det det vi virkelig ønsker (avtale om å bruke hvilket som helst CSS-rammeverk for hullprosjekter). Men hvis du bare vil dele stiler mellom noen få komponenter - er det sannsynligvis ikke den beste måten.

 Summary: 
 (+) easy to use
 (-) no encapsulation

2. Jeg liker denne løsningen, fordi den er veldig forståelig og har forutsigbar oppførsel. Men det er ett problem med den:

Det vil legge til stil-taggen med dine delte stiler hver gang du bruker den. Det kan være et problem hvis du har stor stilfil, eller mange elementer som bruker den.

@Component({
   selector: 'first',
   template: `<h2>  <ng-content> </ng-content> </h2>`,
   styleUrls: ["shared.style.css"]
})
export class FirstComponent {}

Demoen kan finnes her (plunker)

 Summary:
 (+) easy to use
 (+) encapsulation
 (-) duplicates styles for every usage

3. Det er ett alternativ til du kan bruke. Bare lag en komponent til som vil gi delte stiler til dens barn.

  ` <styles-container>
    <first> first comp  </first>
  </styles-container>
  <styles-container>
    <second> second comp </second>
  </styles-container>`

I slike tilfeller må du bruke /deep/ i stilene dine for å gjøre stilen tilgjengelig for barnekomponenter:

:host /deep/ h2 {
  color: red;
}

Det er også verdt å nevne å ikke glemme å bruke :host for å gjøre stiler tilgjengelige kun for barnelementer. Hvis du utelater det, vil du få en ekstra global stil.

Demoen kan finnes her (plunker)

Summary:
(-) you have to create container and it in templates
(+) encapsulation
(+) no duplicated styles

Notater: Innkapsling av stiler er en veldig kul funksjon. Men du bør også huske at det ikke finnes noen måte å begrense dine dyptliggende stiler på. Så hvis du bruker dyptliggende stiler, vil de være tilgjengelige for absolutt alle barn, så bruk det også med forsiktighet.

Relaterte artikler