InnerHTMLを使用して、コンポーネントのHTMLコンテンツをレンダリングします。ただし、innerHTMLはHTMLコンテンツ内のすべての属性を削除し(たとえば、スタイル属性を削除し)、レンダリングします。ただし、そのままレンダリングする必要があり、HTMLコンテンツから属性を抽出する必要はありません。 innerHTMLに相当するものはありますか、innerHTMLで目的の結果を達成できますか。前もって感謝します。
私のテンプレートファイル
<div id="more-info-box" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div class="clearfix">
<div [innerHTML]="htmlContent" class="long-desc-wrap">
</div>
</div>
</div>
</div>
</div>
</div><!-- End Info box -->
私のコンポーネントファイル
import { Component } from '@angular/core';
@Component({
selector: 'cr-template-content',
templateUrl: './app/channel.component.html'
})
export class TemplateComponent {
constructor() {
}
htmlContent = '<p>This is my <strong style="color:red">Paragraph</strong></p>'
}
現在の出力は、スタイル属性なしでレンダリングされたコンテンツです。しかし、望ましい結果はスタイル属性を持つ必要があります。
コンポーネントhtml内に直接注入できます。
プランカーリンク:
https://plnkr.co/edit/lWR6q8?p=preview
@Component({
selector: 'my-app',
template: `
<div>
<h2 [innerHTML]="htmlContent"></h2>
</div>
`,
})
export class App {
htmlContent:string;
constructor() {
this.htmlContent = `<p>This is my html coontent</p>`
}
}
ViewChildを使用します。
import {ViewChild,ElementRef,Component} from '@angular/core'
テンプレートにローカル変数を作成します
<div #div ></div>
コンポーネントクラス内のローカル変数を照会する
@Component({...}) class MyComponent {
@ViewChild('div') div:ElementRef;
}
関数内のネイティブ要素にアクセスします
this.div.nativeElement.innerHTML ="something";
それでおしまい。 ☺
import { DomSanitizer} from '@angular/platform-browser';
....
htmlContent:any;
constructor(private sanitizer: DomSanitizer){
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml('<p>This is my <strong style="color:red">Paragraph</strong></p>');
}
または https://stackoverflow.com/a/41089093/217408 に示すようなパイプを使用できます
htmlを追加する最良のアイデアは、ディレクティブを作成することだと思います:
test.directive.ts:
import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Directive({
selector: '[add-html]'
})
export class TestDirectives{
constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
}
}
これでディレクティブが作成され、このディレクティブを以下のようにapp.module.ts
に追加します。
app.module.ts:
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';
@NgModule({
declarations: [
AppComponent,
TestDirectives
],
imports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
以下のコードのように、このhtmlを追加するhtmlでディレクティブを使用する必要があります:
<div add-html></div>
出力を確認します。