1. Esta solución es buena, pero es más adecuada para cualquier estilo común, que debería estar disponible para todos los componentes. Por ejemplo, estilos para cuadrículas css. Para hacerlo más angular, puede configurar la encapsulación para el componente de su aplicación en ninguno:

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

La demostración se puede encontrar aquí (plunker)

Nota: los estilos, incluidos de esta manera (simplemente agregando una etiqueta de estilo o sin encapsular) afectarán a todos los elementos de sus páginas. A veces, es lo que realmente queremos (acuerdo para usar cualquier marco css para un proyecto completo). Pero si solo quiere compartir estilos entre algunos componentes, probablemente no sea la mejor manera.

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

2. Me gusta esta solución porque es muy comprensible y tiene un comportamiento predecible. Pero hay un problema con eso :

Agregará una etiqueta de estilo con sus estilos compartidos cada vez que lo use. Podría ser un problema si tiene un archivo de estilo grande o muchos elementos que lo están usando.

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

La demostración se puede encontrar aquí (plunker)

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

3. Hay una opción más que podría usar. Simplemente cree un componente más que proporcionará estilos compartidos para sus hijos.

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

En ese caso, tendrá que usar /deep/ en sus estilos para que el estilo esté disponible para los componentes secundarios:

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

También vale la pena ser mencionado para no olvidar el uso de :host para hacer que los estilos estén disponibles solo para elementos secundarios. Si lo omite, obtendrá un estilo global más.

La demostración se puede encontrar aquí (plunker)

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

Notas: La encapsulación de estilos es una característica realmente interesante. Pero también debes recordar que no hay forma de limitar tus estilos profundos. Entonces, si aplicara estilos profundos, estaría absolutamente disponible para todos los niños, así que úselo con cuidado también.

Hay 3 formas de usar el estilo en la aplicación angular2 ( enlace ). Ha mencionado dos de esos que le permiten reutilizar estilos.

Mi opinión personal es que, para cualquier aplicación grande, es preferible optar por el n.° 2, principalmente debido a la encapsulación de vista proporcionada por angular.

#1 se puede usar para los estilos muy genéricos que son comunes a todas las partes de su aplicación. Pero si tiene en cuenta que la raíz en su SPA será un componente angular de todos modos, no hay una necesidad real de optar por otro enfoque de vinculación de estilos que no sea el n. ° 2.

Además, al trabajar con css de dos maneras diferentes, tendrá que recordar esto (y manejar con algún código adicional) cuando, por ejemplo, empaque su aplicación y use herramientas como gulp-inline-ng2-template

Para futuros lectores, creo que esta solución es la mejor.

Supongamos que tiene 2 componentes ( productos y clientes ) y tiene estilos comunes para compartir.

1.Crear un componente más

 //customer-products-styles.component.ts @Component({ selector: "app-customer-products-styles", template: "", styleUrls: ["./customer-products-styles.component.scss"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomerProductsStylesComponent {}

 //customer-products-styles.component.scss app-products, app-customers { p { color: coral; } }

2. Úsalo así

 <!-- Customers Component (app-customers) --> <app-customer-products-styles></app-customer-products-styles> <p> customers works! </p>

 <!-- Products Component (app-products) --> <app-customer-products-styles></app-customer-products-styles> <p> products works! </p>

Beneficios

• Tiene carga diferida, se carga cuando se descarga el fragmento del módulo, se reduce main.js inicial
• Agregar selectores de componentes ( app-customers y app-products ) como elementos primarios para los estilos lo convierte en un componente de alcance
• Sin estilos duplicados y solo carga una vez en el navegador, cualquiera que sea el componente que lo solicite primero

Algunos puntos adicionales

• Establezca la encapsulation en ninguno , pero agregue el selector de componentes como principal en el estilo
• También cambié la detección de cambios predeterminada a OnPush changeDetection no hay necesidad más que para estar seguro

Apilamiento de trabajo