Angular não renderiza HTML extraído do componente?

Oct 08 2020

Estou usando uma série de vídeos para me familiarizar com Angular, codewithmosh. Ele usa glificons em um de seus exercícios, mas o vídeo é de 2018. O suporte ao Glyphicon parece ter sido descontinuado no bootstrap desde então, mas o site de bootstrap ainda inclui o html para seus ícones. Achei que veria se pudesse fazer a mesma coisa empurrando HTML bruto.

O problema é que o html extraído de component.ts não é renderizado e, em vez disso, apenas mostra o código html na página. Esse mesmo html na renderização de componente.html IS.

Sou muito novo aqui, então pode haver uma falha óbvia em meu código. Provavelmente não é bonito, mas PARECE bom, e não consigo entender por que não está funcionando. Idealmente, isso deve ser renderizado como uma estrela vazia, que quando clicada muda para a estrela inteira.

Agradecemos antecipadamente por qualquer ajuda!

aqui está o 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;
    
  }
}

Aqui está o 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>

Aqui está o app.component.html, super básico:

<app-star></app-star>

E aqui está a saída html.

Respostas

2 Elmehdi Oct 08 2020 at 02:45

Ambos os svgs fornecidos estão preenchidos, mas eu fiz um exemplo usando uma estrela normal e uma pequena estrela.

Basta substituir a pequena estrela por uma estrela vazia e isso resolverá o problema.
o que eu basicamente fiz foi colocar um ngIf em ambos os svgs, um com a condição isClickede o outro com o oposto da condição, então !isClicked.
sua função para alterar a condição onClick()está funcionando muito bem.