html - Angular不渲染从组件中提取的HTML?
问题描述
我正在使用一个视频系列来熟悉 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>
解决方案
您提供的两个 svg 都已填充,但我使用普通星形和小星形为您做了一个示例。
只需用空星替换小星,它就可以解决问题。
我基本上所做的是,我在两个 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>
推荐阅读
- redirect - 如何在托管在多个区域的应用程序中进行重定向
- python - 我已经按照教程中的所有内容进行操作,但它在第 6 行显示意外缩进,我该如何解决这个问题
- amazon-web-services - 是否可以使用“AmazonS3ReadOnlyAccess”策略列出所有存储桶?
- asp.net-core - 从 .net 核心中的不同站点发布时无法访问 cookie
- angularjs - 在身份验证 ASP.NET Core 5 上获取连接被拒绝错误
- node.js - 使用 nodejs 和 mongoDB 数据库进行多租户
- python-3.x - python 的 simplekml 不输出“别名”标签
- android - 更新到 gradle 7 后方法 com.android.build.gradle.internal.core.MergedFlavor#setSigningConfig 的模棱两可的方法重载
- laravel - Laravel - 注册后无法将用户重定向到特定路径
- firebase - 如何在另一个函数中访问函数的参数?