javascript - 单击后将 html 或模板加载到 div 中
问题描述
我是 Angular 的新手,我有一个问题:我有一个 div ......如果我们点击 div ..一个函数将被触发..这个函数将在验证输入数据后将模板加载到 div 中将其与默认数据进行比较。所以我的意思是
<div (click)="openTile(data.Salutation === Title.Sir) ? 'Tasks-details' : 'Todo-details';" >
其中 Salutation 是“数据”的参数(构造函数的距离),Title 是枚举类(在我们的组件中导入)
任何人都可以通过函数 openTile 帮助我吗?
多谢
解决方案
我不确定我是否理解正确。如果只是想在点击后根据某些条件显示不同的内容,您可以这样做:
@Component({
template: `
<div (click)="onClick(data.Salutation, Title.Sir)>
<ng-container [ngTemplateOutlet]="isEqual ? task : todo"></ng-container>
</div>
<ng-template #task> if true </ng-template>
<ng-template #todo> if false </ng-template>
`
})
class MyComponent {
isEqual: boolean;
onClick(salutation, sir) {
this.isEqual = salutation === sir;
}
}
推荐阅读
- facebook-graph-api - 使用 facebook graph api 的热门在线视频
- docker - 尝试在 docker 中运行 Go Echo 应用程序时出现模块路径问题
- java - Quarkus:将配置属性注入服务类不起作用
- java - 为什么我不能导入 jdk.javadoc.doclet 包?
- redis - redis-cli:无法识别的选项或错误数量的参数:'--tls'
- ios - 通过将 .speed 设置为 -1 向后恢复 CABasicAnimation
- java - 如何更改 ImageView 中加载的图像?
- apache-spark - Spark Executors PODS 在 Kubernetes 部署中处于挂起状态
- django - 如何在我的视图函数中通过 mptt 创建面包屑
- android - 电容器设备插件适用于离子服务,但在使用 Android Studio 进行测试时不适用于我的手机