是否不呈现从组件中提取的HTML？

我正在使用一系列视频来熟悉角度，编码。他在一次练习中使用了字形图标，但视频来自2018年。Glyphicon支持似乎从那时起就在引导中停止了，但引导站点仍然包含图标的html。我想我会看看是否可以通过推送原始html来做同样的事情

问题是，从component.ts中提取的html并没有呈现，而只是在页面上显示html代码。component.html中的相同html正在呈现

我是新来的，所以我的代码中可能有一个明显的缺陷。它可能不漂亮，但看起来很好，我不明白为什么它不起作用。理想情况下，应将其呈现为空星形，单击后将切换为全星形

提前感谢您的帮助

以下是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;
    
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序之星”，
templateUrl:“./star.component.html”，
})
导出类StarComponent{
isClicked：布尔值；
fullStar:字符串=`
`;
emptyStar:字符串=`
`;
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>

{{currentSymbol}
-------

下面是app.component.html，super basic：

<app-star></app-star>

---

您提供的两个SVG都已填充，但我使用普通星形和小星形为您创建了一个

只需将小星星替换为空星星，就可以了。

我基本上做的是，我在两个SVG上都放了一个ngIf，一个条件是
isClicked
，另一个条件是相反的，所以
！单击


用于更改条件的函数
onClick（）
工作正常

编辑：（有更多解释）

要使typescript变得简单，只需IsClick属性和onClick函数：

export class AppComponent {
  isClicked: boolean;

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

在模板中，您可以添加两个要在其中切换的SVG，每个SVG上都有一个ngIf：

<!-- big star -->
<svg *ngIf="isClicked" (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>

<!-- small star -->
<svg *ngIf="!isClicked" (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 24" 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>


这可能是最好的答案，一旦你在这里发布了代码，我会更新它，我们倾向于避免答案中没有相关代码的链接。请注意，你的HTML中不需要两个独立的
svg
元素，我将你的示例更改为
[attr.viewBox]=“'0 16'+（isClicked？24:16）”
仅使用一个
@JuanMendes，我添加了我的代码，即使没有链接，答案也是相关的。但我将两个SVG分开，只是为了方便在需要时更改为两个完全不同的SVG。我想这没关系，但你回答的问题不需要两个SVG。如果你尽可能简洁，而不是担心它可能是什么，这将是一个更好的答案…@JuanMendes也许我不太理解这个问题，问题的海报上不是说他想在两个SVG之间来回切换吗？