Angulaire 2 - innerHTML style

Je reçois des morceaux de codes HTML de HTTP appels. J'ai mis le code HTML de blocs dans une variable et de l'insérer sur ma page avec[innerHTML] mais je ne peux pas le style de la insérés bloc HTML. Quelqu'un a une suggestion comment je pourrais faire?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

Le code HTML que je veux le style est le bloc contenu dans la variable "calendrier".

Le Style d'où? À partir de l'intérieur de la composante ou de styles ajoutée à index.html?
qu'entendez-vous par can not style the inserted HTML block? Nous montrer ce qu'ont fait pour elle avec un petit extrait de code.
Ive mis à jour mon post avec un fragment de code! 🙂 merci
J'ai ajouté un Plunker lien de ma réponse
que faire si le code HTML de codes css ? comment peut-elle être rendue ?
Ce code HTML? Angulaire de modèles de composants? Je pense que des liens de CSS et <style> balises sont tout simplement supprimés.
J'ai trouvé ce Angulaire 2 documentation. Explique toutes sortes de ':host' et '/profondeur/' sélecteurs.

InformationsquelleAutor Jakob Svenningsson | 2016-03-28

angular innerhtml

269

mise à jour 2 ::slotted

::slotted est désormais pris en charge par tous les nouveaux navigateurs et peut être utilisé avec `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

mise à jour 1 ::ng-deep

/deep/ était obsolète et remplacé par ::ng-deep.

::ng-deep est également déjà marquée obsolète, mais qu'aucun remplacement n'est encore disponible.

Quand ViewEncapsulation.Native est correctement pris en charge par tous les navigateurs et prend en charge le style à travers l'ombre DOM limites, ::ng-deep seront probablement abandonnées.

original

Angulaire ajoute toutes sortes de classes CSS pour le HTML, il ajoute les DOM pour émuler le shadow DOM CSS encapsulation pour prévenir les styles de saignement et de composants. Angulaire également réécrit le CSS que vous ajoutez à correspondre à ces classes. Pour HTML ajoutés à l'aide de [innerHTML] ces classes ne sont pas ajoutés et le réécrit CSS ne correspondent pas.

Comme une solution de contournement essayer
- pour CSS ajouté à la composante
```
/* :host /deep/mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}
```
- pour CSS ajouté à index.html
```
/* body /deep/mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}
```
>>> (et l'équivalent/deep/ mais /deep/ fonctionne mieux avec SASS) et ::shadow ont été ajoutées dans la version 2.0.0-bêta.10. Ils sont semblables à l'ombre DOM CSS combinators (qui sont obsolètes) et fonctionnent uniquement avec encapsulation: ViewEncapsulation.Emulated qui est la valeur par défaut dans Angular2. Ils ont probablement aussi travailler avec ViewEncapsulation.None mais ne sont alors ignorés parce qu'ils ne sont pas nécessaires.
Ces combinators ne sont qu'une solution intermédiaire, jusqu'à ce que des fonctionnalités plus avancées pour la croix-composant style est pris en charge.

Une autre approche consiste à utiliser
```
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
```
pour tous les composants qui bloquent votre CSS (dépend de l'endroit où vous ajoutez le CSS et où le HTML, c'est que vous voulez le style pourrait être tous composants de votre application)

Mise à jour

Exemple Plunker
- Savez-vous si il existe un moyen pour le groupe de plus d'un css de l'élément avec un seul :accueil>>> tag? J'ai aussi essayé d'utilisé l' :accueil>>> balise dans un fichier css externe, mais je ne peux pas obtenir que cela fonctionne. Savez-vous si cela est possible?
- Qu'entendez-vous par "groupe de plus d'un css de l'élément"? Si vous ajoutez le CSS externe à l'aide de styleUrls: [...] pour le composant, il doit travailler avec les styles externes ainsi.
- Juste une note pour toute personne, cela ne fonctionne pas non plus avec nœud-sass, ou avec la styleUrl. Seulement dans les styles:[...]
- cela semble être un problème avec votre configuration. Angulaire ne permet pas de traiter styles et styleUrls différemment.
- Remarque, cette méthode n' PAS si vous utilisez angular-cli et SASS ou SCSS pour votre style. Vous devez utiliser régulièrement CSS pour que cela fonctionne.
- Avec SASS utilisation /deep/ au lieu de >>>
- Quelle serait la recommandation de rendre les styles de l'attribut directives dans innerHTML? Par exemple, el.nativeElement.style.backgroundColor = 'yellow';, comme le montre l'exemple de la documentation ici.
- Vous pouvez r'avoir des directives ou des compinents dans le contenu ajouté avec inneeHTML
- Si le code HTML fourni par HTTP appel est gros et il a css comment est-ce possible que je n'ai pas les styles prédéfinis, je suis de l'inline css @GünterZöchbauer
- Je ne sais pas. Je voudrais essayer d'éviter que, en premier lieu, et a été en mesure de le faire jusqu'à présent moi-même. Je n'utilise que la composante statique de modèles qui sont bien connus au moment de la construction (je suis en utilisant Dart, et avec Dart c'est la seule méthode prise en charge de toute façon). Peut-être vous devriez créer une nouvelle question avec plus de détails au sujet de votre cas d'utilisation.
- fonctionne pour moi lors de l'utilisation de styleUrls [ ... ]
- ::ng-deep a fonctionné pour moi. Merci
InformationsquelleAutor Günter Zöchbauer
0

Si vous êtes en essayant de style ajouté dynamiquement des éléments HTML à l'intérieur d'un Angulaires composant, cela pourrait être utile:
```
//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(), '')
}
```
Ma conjecture est que la convention pour cet attribut n'est pas garanti pour être stable entre les versions de Anguleuses, de sorte que l'on peut rencontrer des problèmes avec cette solution lors de la mise à niveau vers une nouvelle version Angulaire (bien que, la mise à jour de cette solution serait susceptible d'être trivial dans ce cas).

InformationsquelleAutor Trevor

Vous devez vous connecter pour publier un commentaire.