navigationend - router events subscribe angular 4
Angular 2-estilo innerHTML (3)
Recibo fragmentos de códigos HTML de llamadas HTTP. Pongo los bloques HTML en una variable y los inserto en mi página con [innerHTML] pero no puedo diseñar el bloque HTML insertado. ¿Alguien tiene alguna sugerencia de cómo podría lograr esto?
@Component({selector: ''calendar'',
template: ''<div [innerHTML]="calendar"></div>'',
providers:[HomeService],
styles: [`
h3 {color:red;}
`})
El HTML que quiero diseñar es el bloque contenido en la variable "calendario".
La solución simple que debes seguir es
// inside component class...
constructor(private hostRef: ElementRef) { }
getContentAttr(): string {
const attrs = this.hostRef.nativeElement.attributes
for (let i = 0, l = attrs.length; i < l; i++) {
if (attrs[i].name.startsWith(''_nghost-c'')) {
return `_ngcontent-c${attrs[i].name.substring(9)}`
}
}
}
ngAfterViewInit() {
// dynamically add HTML element
dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '''')
}
Si intenta diseñar elementos HTML agregados dinámicamente dentro de un componente angular, esto podría ser útil:
// inside component class... constructor(private hostRef: ElementRef) { } getContentAttr(): string { const attrs = this.hostRef.nativeElement.attributes for (let i = 0, l = attrs.length; i < l; i++) { if (attrs[i].name.startsWith(''_nghost-c'')) { return `_ngcontent-c${attrs[i].name.substring(9)}` } } } ngAfterViewInit() { // dynamically add HTML element dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '''') }
Supongo que no se garantiza que la convención para este atributo sea estable entre las versiones de Angular, por lo que uno podría tener problemas con esta solución al actualizar a una nueva versión de Angular (aunque, actualizar esta solución probablemente sería trivial en ese sentido). caso).
actualización 2
::slotted
::slotted
ahora es compatible con todos los navegadores nuevos y se puede usar con `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
actualización 1 :: ng-deep
/deep/
fue desaprobado y reemplazado por
::ng-deep
.
::ng-deep
también está marcado como obsoleto, pero todavía no hay reemplazo disponible.
Cuando
ViewEncapsulation.Native
es compatible con todos los navegadores y es compatible con el estilo a través de los límites DOM de la sombra, probablemente se suspenderá
::ng-deep
.
original
Angular agrega todo tipo de clases CSS al HTML que agrega al DOM para emular la encapsulación CSS DOM del shadow para evitar estilos de sangrado dentro y fuera de los componentes.
Angular también reescribe el CSS que agrega para que coincida con estas clases agregadas.
Para HTML agregado usando
[innerHTML]
estas clases no se agregan y el CSS reescrito no coincide.
Como una solución alternativa
- para CSS agregado al componente
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
background-color: blue;
}
-
para CSS agregado a
index.html
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
background-color: green;
}
>>>
(y el equivalente
/deep/
but
/deep/
funciona mejor con SASS) y
::shadow
se agregaron en 2.0.0-beta.10.
Son similares a los combinadores CSS DOM de sombra (que están en desuso) y solo funcionan con
encapsulation: ViewEncapsulation.Emulated
que es el valor predeterminado en Angular2.
Probablemente también funcionen con
ViewEncapsulation.None
pero luego solo se ignoran porque no son necesarios.
Estos combinadores son solo una solución intermedia hasta que se admitan características más avanzadas para el diseño de componentes cruzados.
Otro enfoque es usar
@Component({
...
encapsulation: ViewEncapsulation.None,
})
para todos los componentes que bloquean su CSS (depende de dónde agregue el CSS y dónde esté el HTML que desea diseñar, puede que sean todos los componentes de su aplicación)
Actualizar