Angular non esegue il rendering HTML estratto dal componente?

Oct 08 2020

Sto usando una serie di video per familiarizzare con Angular, codewithmosh. Usa i glyphicons in uno dei suoi esercizi, ma il video è del 2018. Il supporto di Glyphicon sembra essere stato interrotto nel bootstrap da allora, ma il sito bootstrap include ancora l'html per le loro icone. Ho pensato che avrei visto se potevo fare la stessa cosa spingendo in giro html grezzo.

Il problema è che l'html estratto da component.ts non viene visualizzato e invece mostra solo il codice html sulla pagina. Lo stesso HTML nel component.html È il rendering.

Sono davvero nuovo qui, quindi potrebbe esserci un evidente difetto nel mio codice. Probabilmente non è carino, ma SEMBRA suonare e non riesco a capire perché non funziona. Idealmente questo dovrebbe essere reso come una stella vuota, che se cliccata passa alla stella piena.

Grazie in anticipo per qualsiasi aiuto!

ecco l'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;
    
  }
}

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

Ecco l'app.component.html, super basic:

<app-star></app-star>

Ed ecco l'output html.

Risposte

2 Elmehdi Oct 08 2020 at 02:45

Entrambi gli svg che hai fornito sono riempiti, ma ti ho fatto un esempio usando una stella normale e una piccola stella.

Basta sostituire la piccola stella con una stella vuota e farà il trucco.
quello che ho fatto fondamentalmente è, ho messo un ngIf su entrambi svgs, uno con la condizione isClickede l'altro con l'opposto della condizione, quindi !isClicked.
la tua funzione per cambiare la condizione onClick()sta funzionando bene.