Angular не отображает HTML, извлеченный из компонента?

Oct 08 2020

Я использую серию видео, чтобы познакомиться с Angular, codewithmosh. Он использует глификоны в одном из своих упражнений, но это видео с 2018 года. С тех пор кажется, что поддержка Glyphicon в начальной загрузке была прекращена, но сайт начальной загрузки все еще включает html для их значков. Я подумал, что посмотрю, смогу ли я сделать то же самое, нажимая на необработанный html.

Проблема в том, что HTML-код, извлеченный из component.ts, не отображается, а просто показывает HTML-код на странице. Тот же самый html в рендеринге component.html IS.

Я здесь новичок, поэтому в моем коде может быть очевидная ошибка. Это, вероятно, не очень красиво, но кажется, звучит, и я не могу понять, почему он не работает. В идеале это должно быть отображено как пустая звезда, которая при нажатии переключается на полную звезду.

Заранее благодарю за любую помощь!

вот 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;
    
  }
}

Вот 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>

Вот app.component.html, супер базовый:

<app-star></app-star>

А вот и вывод html.

Ответы

2 Elmehdi Oct 08 2020 at 02:45

Оба предоставленных вами svgs заполнены, но я сделал вам пример, используя обычную звезду и маленькую звезду.

Просто замените маленькую звезду пустой звездой, и это поможет.
то, что я в основном сделал, это то, что я поставил ngIf на оба svgs, один с условием, isClickedа другой с противоположным условию, так что !isClicked.
ваша функция для изменения состояния onClick()работает нормально.

Изменить: (с дополнительным объяснением)

Чтобы сделать ваш машинописный текст простым, вам просто понадобятся свойство isClicked и функция onClick:

export class AppComponent {
  isClicked: boolean;

  onClick() {
    this.isClicked = !this.isClicked;
  }
}

и в вашем шаблоне вы можете добавить два svgs, между которыми хотите переключаться, с ngIf для каждого из них: