Comment obtenir Angular2 pour lier le composant dans innerHTML
Je veux créer un composant myApp
qui va intégrer le code HTML d'un bien sur le contrôleur dans son modèle. Cependant, certaines de que le HTML peut inclure d'autres composants de sélecteurs.
import {InfoComponent} from ...
@Component({
selector: 'myApp',
template: `<div [innerHTML]='hData'></div>
<myInfo></myInfo>`,
directives: [InfoComponent]
})
export class AppComponent {
hData = "<myInfo></myInfo>";
}
@Component({
selector: 'myInfo',
template: "<b>This is a test</b>"
})
export class InfoComponent {
}
Dans cet exemple, je m'attends à voir This is a test
affiché deux fois. Cependant, il ne semble pas que le Angular2 moteur ramasse sur le fait que le sélecteur de la Composante a été injecté de sorte que le modèle n'est jamais généré pour le <myInfo></myInfo>
sélecteur qui est d'ajouter via la liaison.
Vous pouvez voir un démo ici.
Est-il un moyen d'obtenir Angular2 pour analyser le sélecteur de la même manière qu'il le fait avec le sélecteur est ajouté de manière explicite dans le modèle?
source d'informationauteur RHarris | 2016-04-04
Vous devez vous connecter pour publier un commentaire.
Il n'y a aucun moyen de faire
[innerHtml]="..."
instancier des composants Angulaires ou des directives, ou encore de créer des liaisons.Le plus proche de cette exigence est
DynamicComponentLoader.(DynamicComponentLoader a été supprimé il y a longtemps)ViewContainerRef.createComponent()
Voir Angulaire 2 dynamique des onglets avec l'utilisateur, cliquez sur composants choisis pour un exemple
Depuis RC.5 Angular2 nettoie les styles et HTML ajoutées par le biais de la liaison.
Voir En RC.1 certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison pour plus de détails.