Angular2 [innerHtml] angular2標記不起作用

我想在我的a組件中使用另一個組件的angular2標籤注入html。Angular2 [innerHtml] angular2標記不起作用

@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標籤不起作用）。

來源

2017-01-05 Andrei

我發現了一個解決方案，angular2-dynamic-component

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

來源

2017-01-06 17:44:36 Andrei

Angular不處理由[innerHTML]="..."添加的HTML。它只是按原樣添加，就是這樣。您甚至可能需要使用清潔劑，因此出於安全原因沒有任何東西被清除（請參閱In RC.1 some styles can't be added using binding syntax）。

如果要動態地添加組件，您可以使用ViewContainerRef.createComponent()例如像Angular 2 dynamic tabs with user-click chosen components

來源

2017-01-05 21:44:39

我使用了Sanitizer，但是angular2標籤沒有工作 – Andrei

當然不是。正如我所說的，Angular2不會爲這種方式添加HTML創建組件。 –

我看過你的加載動態標籤的例子。我不想加載組件，我想用Angular2標籤加載我的html。我的任務 - 從服務器加載帶有angular2標籤的html，並將其呈現在另一個組件中。 – Andrei

解釋有幾個方法可以做到這一點。

COMPONENT INTERACTION

如果是組件之間的父/子關係，那麼你可以使用Input()和Output()通過他們

之間的值，該子組件通過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; 
}

這是從父通過模板傳遞：

parent.component.html

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

您可以使用Output()從孩子去父母。

SERVICES

的另一種方法是創建一個被注入到這兩個組件的服務。一個組件可以向服務發送一個值，另一個組件可以獲得該值。在Angular2中，這通常通過將observables用於數據對象來實現。

來源

2017-01-05 22:13:29

我不只是使用innerHtml。我試過你的解決方案，因此 - html標籤和angular2標籤不起作用 – Andrei

-1

您可以使用Renderer2 Class這一點。

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

來源

2017-05-09 06:14:32 jgatjens

如果像這樣插入，角度組件不起作用 – Andrei

@Andrei我能夠在上週在服務器上呈現d3圖形，它是實驗性的但如果不適合您，請改用Renderer類。 – jgatjens

Angular2 [innerHtml] angular2標記不起作用

回答

相關問題