Angular ne rend pas le HTML extrait du composant?

Oct 08 2020

J'utilise une série de vidéos pour me familiariser avec Angular, codewithmosh. Il utilise des glyphicons dans l'un de ses exercices, mais la vidéo date de 2018. La prise en charge de Glyphicon semble avoir été interrompue dans le bootstrap depuis lors, mais le site bootstrap inclut toujours le html pour leurs icônes. J'ai pensé que je verrais si je pouvais simplement faire la même chose en poussant autour du html brut.

Le problème est que le html extrait de component.ts n'est pas rendu, et affiche simplement le code html sur la page. Ce même html dans le rendu component.html EST.

Je suis vraiment nouveau ici, donc il pourrait y avoir une faille évidente dans mon code. Ce n'est probablement pas joli mais il semble avoir un son, et je ne comprends pas pourquoi cela ne fonctionne pas. Idéalement, cela devrait être rendu comme une étoile vide, qui, lorsque vous cliquez dessus, passe à l'étoile pleine.

Merci d'avance pour votre aide!

voici 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;
    
  }
}

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

Voici l'app.component.html, super basique:

<app-star></app-star>

Et voici la sortie html.

Réponses

2 Elmehdi Oct 08 2020 at 02:45

Les deux svgs que vous avez fournis sont remplis, mais je vous ai fait un exemple en utilisant une étoile normale et une petite étoile.

Remplacez simplement la petite étoile par une étoile vide, et cela fera l'affaire.
ce que j'ai fait, c'est que j'ai mis un ngIf sur les deux svgs, l'un avec la condition isClickedet l'autre avec l'opposé de la condition, donc !isClicked.
votre fonction pour changer la condition onClick()fonctionne très bien.