wie das Anhängen von HTML-Inhalten in den Winkel-2 mit innerHTML

Ich mit innerHTML zum Rendern von HTML-Inhalten in meine Komponente. Aber innerHTML entfernen Sie alle Attribute (z.B.: entfernt die style-Attribute) in die HTML-Inhalte und rendert es. Aber dargestellt werden muss, wie es ist, und nicht wollen, um zu extrahieren alle attribute aus dem HTML-Inhalt. Gibt es irgendein äquivalent zu innerHTML-oder tun wir das erreichen können, das gewünschte Ergebnis mit innerHTML. Vielen Dank im Voraus.

meine template-Datei

<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 -->

meine Komponente Datei

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>'

}

Meine aktuelle Ausgabe ist der Inhalt gerendert ohne style-Attribut.
Aber das gewünschte Ergebnis lässt sich mit style-Attribut.

Was bedeutet "und fügt es in meiner Komponente" bedeuten? Nie von so etwas gehört. Bitte zeigen Sie Ihren code. Siehe stackoverflow.com/questions/31548311/angular-2-html-binding/...
Bitte poste deinen code, was Sie bisher ausprobiert haben.
es klingt wie Sie benötigen zu verwenden DomSanitazer, aber wie @Günter Zöchbauer gesagt - es wird viel einfacher zu helfen, wenn Sie kann fügen Sie einige code, der von Ihnen oder von plunker...
Hey @Manush dies funktioniert gut für mich..

InformationsquelleAutor Manush | 2017-03-30

  1. 10

    können Sie direkt mit der Spritze in Ihrem html-Komponente.

    Plunker link:

    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>`
  }
}

    InformationsquelleAutor Rohan Fating

  2. 4

    Mit ViewChild.

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

    erstellen Sie eine lokale variable in der Vorlage

    <div #div ></div>

    Abfrage der lokalen Variablen innerhalb der Komponente-Klasse

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

    Zugriff auf native Elemente innerhalb jeder Funktion

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

    das ist es. ☺

    InformationsquelleAutor crook

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

    oder Sie können mit Hilfe einer pipe, wie hier abgebildet, https://stackoverflow.com/a/41089093/217408

    wie kann ich einbetten file2.component.html in file1.component.html ?
    Sorry, ich verstehe nicht die Frage. Ich würde vorschlagen, ti erstellen Sie eine neue mit mehr details.
    Ohh sory fürs, dass. ich werde versuchen zu erklären, hier, in der oben genannten Antwort, die wir anfügen einigen Absatz<p> . aber in meinem Fall, dass Absatz<p> ist es in einem anderen html-Datei. Ich möchte anfügen file2.html Inhalt in file1.html. Wie soll ich das tun ? irgendwelche Vorschläge
    Diese Frage ist nicht zum hinzufügen von Dateien, es geht um das hinzufügen einer HTML-string. Können Sie ein iframe-Element zu zeigen, eine HTML-Datei.

    InformationsquelleAutor Günter Zöchbauer

  4. 0

    Ich denke, die beste Idee, um html-Code hinzufügen, erstellen Sie eine Richtlinie:

    test.Richtlinie.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>';
    }
}

    nun ist Ihr der Richtlinie wurde erstellt und Sie haben, fügen Sie diese Richtlinie in Ihr app.module.ts wie unten:

    app.- Modul.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 { }

    Sie mit der Richtlinie in den html-Code, wo Sie wollen fügen Sie diesen html, wie im folgenden code:

    <div add-html></div>

    Sehen nun die Ausgabe.

    InformationsquelleAutor Shubham Verma

Schreibe einen Kommentar