wake-up-neo.com

TypeScript - HTML an Containerelement in Angular 2 anhängen

Was ich tun möchte, ist einfach etwas HTML an ein Element anzuhängen .. Ich habe einige Links überprüft und finde verschiedene verwirrende/nicht funktionierende/nicht empfohlene/etc-Lösungen.

Mit Javascript mache ich so etwas

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

Wie kann ich mit TypeScript/angle2, RC5 dasselbe Ergebnis erzielen?

EDIT

Das Element mit der Klasse .one wird von einem externen js generiert und kann nicht geändert werden

18
Gerald Hughes

1.

<div class="one" [innerHtml]="htmlToAdd"></div>
this.htmlToAdd = '<div class="two">two</div>';

Siehe auch In RC.1 können einige Stile nicht mithilfe der Bindungssyntax hinzugefügt werden

  1. Alternative
<div class="one" #one></div>
@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

oder um direkten DOM-Zugriff zu verhindern:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}
    3.
constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}
39

Mit der neuen Winkelklasse Renderer2 (experimentell)

constructor(private renderer:Renderer2) {}

  @ViewChild('one') d1:ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }
4
Juan

Sie könnten so etwas tun:

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>"; // Dies ist HTML im TypeScript-Code, den Sie anzeigen müssen

htmlComponent.html

<div [innerHtml]="htmlVariable"></div> // So zeigen Sie HTML-Code aus TypeScript in Ihrer HTML-Datei an

3
Stefan Svrkota

Es gibt eine bessere Lösung für diese Antwort, die eher auf Angular basiert. 

  1. Speichern Sie Ihre Zeichenfolge in einer Variablen in der .ts-Datei

    MyStrings = ["one","two","three"]

  2. Verwenden Sie in der HTML-Datei * ngFor.

    <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

  3. wenn Sie das div-Element dynamisch einfügen möchten, fügen Sie einfach weitere Strings in das MyStrings-Array ein

    myFunction(nextString){ this.MyString.Push(nextString) }

auf diese Weise fügen Sie jedes Mal, wenn Sie auf die Schaltfläche mit der Funktion myFunction (nextString) klicken, eine weitere Klasse = "zwei" div hinzu, die wie das Einfügen in das DOM mit reinem Javascript funktioniert. 

2
Lorenzo Oliver

Bei der Arbeit mit Angular das jüngste Update auf Angular 8 eingeführt, dass eine static -Eigenschaft in @ViewChild() wie angegeben erforderlich ist hier und hier . Dann würde Ihr Code diese kleine Änderung erfordern:

@ViewChild('one') d1:ElementRef;

in

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;
0