Angular不渲染从组件中提取的HTML？

Question

我正在使用一个视频系列来熟悉 Angular，codewithmosh。他在其中一个练习中使用了 glyphicons，但该视频来自 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;
    
  }
}

这里是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 输出。

Answer 1

您提供的两个 svg 都已填充，但我使用普通星形和小星形为您制作了 example。

只需用空星替换小星，就可以了。
我基本上所做的是，我在两个 svgs 上都放了一个 ngIf，一个条件为isClicked，另一个条件相反，所以!isClicked。
您用于更改条件的功能onClick() 工作正常。

编辑：（有更多解释）

为了让你的打字稿变得简单，你只需要 isClicked 属性和 onClick 函数：

export class AppComponent {
  isClicked: boolean;

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

在你的模板中，你可以添加你想要在它们之间切换的两个 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>