Estilos angulares Vs StyleUrls

 

Al crear plantillas para componentes en una aplicación Angular, es probable que desee tener la capacidad de diseñar ese componente específico con estilos CSS sin afectar a otros componentes. Una plantilla determinada a menudo necesitará un estilo único. Por ejemplo, si crea un componente de pie de página especial, es posible que desee aplicar un estilo a los hipervínculos con un estilo diferente al del resto de la aplicación. En el caso de tener componentes anidados, hay un par de formas de aplicar estilos al componente anidado sin fugas a otros componentes. En este tutorial, veremos cómo podemos aplicar estilos específicos solo a ciertos componentes.

---

CSS en línea del archivo de plantilla HTML

La primera opción que tiene es simplemente incorporar las reglas CSS dentro del HTML de la plantilla dada. Este enfoque a menudo funciona para los estilos rápidos y sucios que desea aplicar, pero el problema es con el tiempo, se vuelve muy complicado y más difícil de mantener. Aquí hay un ejemplo de cómo agregar un estilo en línea al archivo de plantilla angular directamente.

game-list.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<table class='table' *ngIf='games && games.length'>     <thead>     <tr>         <th>             <button class='btn btn-primary'                     (click)='toggleImage()'>                 {{showImage ? 'Hide&nbsp;' : 'Show'}} Image             </button>         </th>         <th style="color:firebrick">Game</th>         <th>Part#</th>         <th>Release Date</th>         <th>Cost</th>         <th>5 Thumb Rating</th>     </tr>     </thead>     <tbody>     <tr *ngFor='let game of games'>         <td>             <img *ngIf='showImage'                  [src]='game.imageUrl'                  [title]='game.gameName'                  [style.width.px]='imageWidth'                  [style.margin.px]='imageMargin'>         </td>         <td>{{ game.gameName }}</td>         <td>{{ game.gameCode | lowercase }}</td>         <td>{{ game.releaseDate }}</td>         <td>{{ game.price | currency:'USD':'symbol':'1.2-2' }}</td>         <td>{{ game.thumbRating }}</td>     </tr>     </tbody> </table>

---

Encapsular estilos angulares

El componente Decorator tiene propiedades integradas que permiten a los desarrolladores encapsular estilos como parte del componente directamente. Estas son las propiedades stylesystyleUrls .

---

Utilizando styles

con la stylespropiedad en el componente, puede aplicar un estilo o varios estilos directamente en el valor de la stylespropiedad. He aquí un ejemplo de eso.

game-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import {Component} from '@angular/core'; import {IGame} from './game';   @Component({     selector: 'game-list',     templateUrl: './game-list.component.html',     styles: ['th:nth-child(3) {color:deepskyblue}'] }) export class GameListComponent {     pageTitle = 'Dynamic! Game List';     imageWidth = 45;     imageMargin = 1;     showImage = true;     listItem = 'Mario';     games: IGame[] = [...];       toggleImage(): void {         this.showImage = !this.showImage;     } }

---

Utilizando styleUrls

Tanto el styley styleUrlspropiedades son arrays. Esto significa que, en el caso de styles, puede aplicar múltiples definiciones de estilo para cada posición de la matriz. En el caso de styleUrls, puede especificar una hoja de estilo vinculada en cada posición de la matriz. Esto significa que puede dividir diferentes reglas CSS en diferentes hojas de estilo CSS si lo desea. Para utilizar la styleUrlspropiedad, primero podemos crear una hoja de estilo externa a la que enlazar para este componente.

El propósito de encapsular los estilos dentro del componente es para que los selectores o clases que se utilicen solo apunten a este componente específico. De esa manera, no obtendrá resultados inesperados en ninguna otra parte de la página cuando el estilo esté encapsulado. Este es un gran beneficio. Sin embargo, antes de que podamos aplicar estilos en esta nueva hoja de estilo, debemos vincularla. Así es como se hace.
game-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import {Component} from '@angular/core'; import {IGame} from './game';   @Component({     selector: 'game-list',     templateUrl: './game-list.component.html',     styleUrls: ['./game-list.component.css'] }) export class GameListComponent {     pageTitle = 'Dynamic! Game List';     imageWidth = 45;     imageMargin = 1;     showImage = true;     listItem = 'Mario';     games: IGame[] = [...];       toggleImage(): void {         this.showImage = !this.showImage;     } }

Una vez que la hoja de estilo externa está vinculada en la styleUrlspropiedad, podemos agregar algunas reglas de estilo al archivo game-list.component.css como tal.

1 2 3

th:nth-child(4) {     color: lightslategrey; }

Nota: Debe elegir uno u otro enfoque cuando se trata de aplicar estilos CSS en el componente Decorator. En otras palabras, coloque una matriz de reglas de estilo en la propiedad styles o vincule una hoja de estilo externa en la propiedad styleUrls . No trabajan juntos. Por lo tanto, en la mayoría de los casos, probablemente sea más fácil y conveniente usar esa propiedad styleUrls junto con una hoja de estilo vinculada.

---

Resumen

Es posible encapsular estilos en Angular definiendo estilos en el propio componente. Esto permite que los estilos definidos sean específicos para el componente dado, sin fugas a otras partes de la aplicación.

• Propiedad styles : se utiliza para especificar una matriz de estilos declarados. Bueno para definiciones de estilo muy simples.
• Propiedad styleUrls : se utiliza para especificar una matriz de rutas de hojas de estilo vinculadas. Mejor para un diseño más organizado de declaraciones de estilo.

El uso de uno de estos dos enfoques conduce a que los estilos dados se encapsulen en el componente.