disabled - Extienda/anule el estilo del componente angular2 reutilizable

disable a angular

Question

Suponiendo que queremos usar un componente de alguna biblioteca en angular2 (ejemplo de material2 ). La anotación componente se ve así:

@Component({
  moduleId: module.id,
  selector: ''md-input'',
  templateUrl: ''input.html'',
  styleUrls: [''input.css''],
  providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
  host: {''(click)'' : ''focus()''}
})

Este componente se envía con una hoja de estilo "predeterminada", la "entrada.css". Si utilizamos este componente en nuestra aplicación, es probable que deseemos sobrescribir / ampliar parte del estilo, sin copiar y manipular el componente en sí. ¿Como hacer esto?

Solución posible 1: Establezca la encapsulación en "ViewEncapsulation.None":
Esto no es realmente una solución, solo una solución.

Posible solución 2: utilice ":: shadow" o "/ deep /" en CSS:
Funciona también, pero está en desuso según las especificaciones de WebComponent.

Posible solución 3: utilice CSS global y anule el componente CSS:
Funciona también, pero viola el concepto sombra DOM.

Posible solución 4: sobrescribir directamente en la plantilla del componente principal:

Ejemplo:

<my-cmp [font-size]="100"></my-cmp>

No es realmente adecuado si hacemos demasiadas anulaciones.

Posible solución 5: anule o extienda la definición de "@Component" con una hoja de estilo adicional de alguna manera:
Esta parece ser la única solución correcta (al menos para mí). Pero no tengo idea de cómo hacer esto ...

Algún consejo sobre esto? Tal vez tengo algo mal ... Gracias.

Answer 1

Posible solución 2: utilice ":: shadow" o "/ deep /" en CSS:

Esto solo se aplica si usa ViewEncapsulation.Native .

Si usa ViewEncapsulation.Emulated (predeterminado), Angular usa su propia interpretación de /deep/ and ::shadow y la desactivación no se aplica.

Si usa ViewEncapsulation.Native entonces no tiene suerte porque el navegador native ::shadow y /deep/ deep están en desuso y Angular aún no proporciona ningún soporte para el soporte de ViewEncapsulation.Native para ViewEncapsulation.Native como por ejemplo Polymer does with ( polyfilled) CSS variables y mixins.

Answer 2

Comenzando con Angular 2.3 podemos usar herencia de componentes. Para lograr su Solución 5, podríamos hacer esto.

//This is our base component that we want to override
@Component({
  selector: ''pagination'',
  templateUrl: ''./pagination.component.html'',
  styleUrls: [''./pagination.component.css'']
})
export class PaginationComponent {
}


//This inherits from our base component and uses a different style sheet.
@Component({
  selector: ''pagination2'',
  //This is sharing the template with the parent class.  Note
  //this needs to be included since templateUrl doesn''t automatically
  //inherit.
  templateUrl: ''./pagination.component.html'',
  //This is using a unique css file 
  styleUrls: [''./pagination2.component.css'']
})
export class PaginationComponent2 extends PaginationComponent {
}

Answer 3

En Angular 4, podemos anular el estilo con el selector de pseudo-clase ::ng-deep de la hoja de estilo de clase heredada.

:host ::ng-deep element {
    //your style here
}

Para obtener más información, consulte http://blog.angular-university.io/angular-ngclass-ngstyle/

Answer 4

Para la solución 5, debe crear una subclase para el componente objetivo, crear un decorador personalizado que maneje / anule los metadatos y lo configure para el subcomponente actual.

Aquí hay una muestra:

@CustomComponent({
  styleUrls: [''css/style.css'']
})
export class OverridenComponent extends SomeComponent {
}

El decorador CustomComponent se vería así:

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata(''annotations'', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (!isPresent(parentAnnotation[key])) {
        annotation[key] = parentAnnotation[key];
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata(''annotations'', [ metadata ], target);
  }
}

Vea esta pregunta para más detalles:

• Decorador de componente extendido con decorador de clase base