Angular2 [innerHtml] angular2-Tag funktioniert nicht

Question

Ich möchte HTML in meine a-Komponente mit angular2 Tags aus einer anderen Komponente injizieren.

@Component({ 
    selector: 'app-root', 
    template: '<app-a [my-html]="my-html"> </app-a>', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    my-html= '<span> {{variableFromAComponent}}</span>'; 
} 



@Component({ 
     selector: 'app-a', 
     template: '<div [innerHtml]="my-html"> </div>', 
    }) 
    export class AComponent { 
     @Input('my-html') my-html:any; 
     public variableFromAComponent='its work!'; 
    } 

Ich möchte im Ergebnis sehen: seine Arbeit! (from variableFromAComponent) Aber ich sehe {{variableFromAComponent}} (angular2 Tags funktioniert nicht).

Answer 1

fand ich eine Lösung in angular2-dynamic-component

<template dynamic-component 
      [componentContext]="self" 
      [componentModules]="dynamicExtraModules" 
      [componentTemplate]='"here html tags with angular2 tags"'> 
</template> 

Answer 2

Angular verarbeitet kein HTML, das von [innerHTML]="..." hinzugefügt wurde. Es wird nur hinzugefügt, wie es ist und das ist es. Möglicherweise müssen Sie sogar den Sanitizer verwenden, damit aus Sicherheitsgründen nichts entfernt wird (siehe In RC.1 some styles can't be added using binding syntax).

Wenn Sie dynamisch Komponenten hinzufügen, können Sie ViewContainerRef.createComponent() zum Beispiel verwenden, wie in Angular 2 dynamic tabs with user-click chosen components erklärt

Answer 3

Es gibt ein paar Möglichkeiten, wie Sie dies tun können.

COMPONENT INTERACTION

Wenn es eine Eltern/Kind-Beziehung zwischen den Komponenten, dann können Sie Input() und Output() verwenden, um Werte passieren zwischen ihnen

Dieses Kind Komponente erhält den Wert durch die Input()

child.component.ts

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'child', 
    template: '<div>{{myHtml}}</div>', // these curly braces add the text as innerHTML 
    providers: [ FoodsService] 
}) 
export class ChildComponent implements OnInit { 
    @Input() myHtml: string; 
} 

, die von den übergeordneten durch die Vorlage übergeben wird:

parent.component.html

<child [myHtml]="'You're String Here (or a variable set to "its work")'"></child> 

Sie Output() vom Kind zum Elternteil gehen verwenden können.

SERVICES

Der andere Weg ist, einen Dienst zu schaffen, die in beiden Komponenten eingespritzt werden. Eine Komponente kann einen Wert an den Dienst senden und der andere kann diesen Wert erhalten. In Angular2 wird dies oft durch Verwendung von observables an einem Datenobjekt erreicht.

Answer 4

Sie Renderer2 Class dafür verwenden können.

import { ElementRef, Renderer2 } from '@angular/core'; 

constructor (
    private elementRef: ElementRef, 
    private renderer: Renderer 
) {} 

public ngAfertViewInit(): void { 
    this.renderer 
    .setElementProperty(
     this.elementRef.nativeElement, 
     'innerHTML', 
     '<h1> Nice Title </h1>' 
    ); 
}