Winkel nicht Rendering HTML aus Komponente gezogen?

Oct 08 2020

Ich benutze eine Videoserie, um mich mit Angular, Codewithmosh, vertraut zu machen. Er verwendet Glyphicons in einer seiner Übungen, aber das Video stammt aus dem Jahr 2018. Die Glyphicon-Unterstützung scheint seitdem im Bootstrap eingestellt worden zu sein, aber die Bootstrap-Site enthält weiterhin das HTML für ihre Symbole. Ich dachte, ich würde sehen, ob ich das Gleiche tun könnte, indem ich rohes HTML herumschiebe.

Das Problem ist, dass der aus component.ts gezogene HTML-Code nicht gerendert wird und stattdessen nur den HTML-Code auf der Seite anzeigt. Das gleiche HTML in der component.html wird gerendert.

Ich bin wirklich neu hier, daher könnte es einen offensichtlichen Fehler in meinem Code geben. Es ist wahrscheinlich nicht schön, aber es scheint zu klingen, und ich kann nicht herausfinden, warum es nicht funktioniert. Idealerweise sollte dies als leerer Stern dargestellt werden, der beim Klicken auf den vollen Stern wechselt.

Vielen Dank im Voraus für jede Hilfe!

Hier ist die app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-star',
  templateUrl: './star.component.html',
  
 })

export class StarComponent {
  isClicked: boolean;

  
  fullStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  emptyStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  currentSymbol: string = this.emptyStar;
  
  onClick() {
    this.isClicked = !this.isClicked;

    this.currentSymbol = this.isClicked ? this.fullStar : this.emptyStar;
    
  }
}

Hier ist die star.component.html:

{{currentSymbol}}
-------
    <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
    </svg>

Hier ist die app.component.html, super einfach:

<app-star></app-star>

Und hier ist die HTML-Ausgabe.

Antworten

2 Elmehdi Oct 08 2020 at 02:45

Beide von Ihnen bereitgestellten SVGs sind gefüllt, aber ich habe Ihnen ein Beispiel mit einem normalen Stern und einem kleinen Stern gemacht.

Ersetzen Sie einfach den kleinen Stern durch einen leeren Stern, und es wird den Trick tun.
Was ich im Grunde getan habe, ist, dass ich ein ngIf auf beide svgs gesetzt habe, eines mit der Bedingung isClickedund das andere mit dem Gegenteil der Bedingung, also !isClicked.
Ihre Funktion zum Ändern des Zustands onClick()funktioniert einwandfrei.