web-dev-qa-db-ja.com

innerHTMLを使用してangular 2にHTMLコンテンツを追加する方法

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">&times;</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>'

}

現在の出力は、スタイル属性なしでレンダリングされたコンテンツです。しかし、望ましい結果はスタイル属性を持つ必要があります。

angularangular2-templateinnerhtml
9
Manush

コンポーネント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>`
  }
}
11
Rohan Fating

ViewChildを使用します。

import {ViewChild,ElementRef,Component} from '@angular/core'

テンプレートにローカル変数を作成します

<div #div ></div>

コンポーネントクラス内のローカル変数を照会する

@Component({...}) class MyComponent {
@ViewChild('div') div:ElementRef;
}

関数内のネイティブ要素にアクセスします

this.div.nativeElement.innerHTML ="something";

それでおしまい。 ☺

6
not_python
 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 に示すようなパイプを使用できます

4
Günter Zöchbauer

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>

出力を確認します。

0
Shubham Verma