Angular2 [innerHtml] angular2タグが機能しません

Question

別のコンポーネントのangular2タグを使用して、a-componentにhtmlを挿入したいとします。

@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!'; 
    } 

私は結果を見たい：その仕事！ （variableFromAComponentから）しかし、私は{{variableFromAComponent}}を参照してください（angular2タグは機能しません）。

Answer 1

私はあなたがこのためにRenderer2 Classを使用することができますangular2-dynamic-component

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

Answer 2

角は、[innerHTML]="..."によって追加されたHTMLを処理しません。それはそのままで追加され、それだけです。 Sanitizerを使用する必要があるかもしれないので、セキュリティの理由から何も取り除かれません（In RC.1 some styles can't be added using binding syntax参照）。

あなたが動的にコンポーネントを追加したい場合は、あなたがこれを行うことができますカップルの方法がありますAngular 2 dynamic tabs with user-click chosen components

Answer 3

で説明したように、あなたは、例えばViewContainerRef.createComponent()を使用することができます。

COMPONENT INTERACTION

コンポーネント間の親/子関係があれば、この子コンポーネントがInput()

を通じて値を取得します

、それらの間に、あなたは値を渡すInput()とOutput()を使用することができます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; 
} 

テンプレートを介して親から渡され

：

parent.component.html

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

あなたは子から親に行くためにOutput()を使用することができます。

SERVICES

他の方法は、両方の成分中に注入されますサービスを作成することです。 1つのコンポーネントはサービスに値を送信し、もう1つのコンポーネントはその値を取得できます。 Angular2では、多くの場合、データオブジェクトにobservablesを使用することによって実現されます。

Answer 4

で解決策を見つけました。

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>' 
    ); 
}