指令切换组件中的内容。
指令切换组件中的内容。
提问于 2017-11-27 19:58:08
我是较新的角度2(请仁慈)，并有一个困难的指示，我正试图利用按钮组件。我需要做的是让指令执行DOM操作，根据指令中捕获的输入状态来切换组件中的内容。请参阅下面的HTML：
<button ion-button actionIndicator [when]="isLoading">
<ion-icon [name]="userIcon"></ion-icon>
Update User
</button>button是一个组件，actionIndicator是输入为when的指令。应该根据when的actionIndicator指令状态切换按钮中内容的显示。
指令代码：
@Directive({
selector: "[actionIndicator]"
})
export class ActionIndicatorDirective implements AfterViewInit {
constructor(
private el: ElementRef,
private viewContainer: ViewContainerRef,
private renderer: Renderer2
) {}
@Input() public actionIndicator;
@Input("when") set showIndicator(hasIndicator: boolean) {
if (hasIndicator) {
// hide current content (ion-icon & "Update User" text)
// create & display component <ion-spinner class="action-spinner"></ion-spinner)
}
else {
// remove component <ion-spinner>
// display content (ion-icon & "Update User" text)
}
}
ngAfterViewInit() {
// store reference to current component's content (ion-icon & "Update User" text) to be able to toggle based on state of [when]
}
}我很熟悉如何使用DOM脚本来显示/隐藏内容，但我相信Rang2希望开发人员利用他们的抽象(ElementRef、ViewContainerRef等)来处理DOM操作。请有人了解一下这是如何工作的，特别是对于指令，它必须是一个指令。
编辑的解释(re: using *ngIf)
我意识到我应该更具体一些，因为人们只需要做一个简单的*ngIf，我不能简单地这样做，因为我们的应用程序中有大约40个不同的位置，我们需要这样做，它不仅仅是显示/隐藏文本，还需要在隐藏按钮文本时显示一个旋转器。当<ion-spinner class="action-spinner"></ion-spinner>是true时，我需要在按钮中显示true，然后当它是false时，用按钮文本交换它。您可以使用*ngIf来适应这种情况，但是每个地方都会很混乱，而且使用我前面概述的原始HTML会简单得多。:)
任何帮助都是非常感谢的！
回答 1
Stack Overflow用户
发布于 2017-11-28 07:42:49
角给出这样的指令*ngIf，它将根据布尔表达式将代码移除/添加到DOM中。
<button ion-button *ngIf="isLoading">
<ion-icon [name]="userIcon"></ion-icon>
Update User
</button>如果您不想每次添加/删除元素，只需隐藏它，您可以使用：
<button ion-button [style.display]="isLoading?'block':'none'">
<ion-icon [name]="userIcon"></ion-icon>
Update User
</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47518862
复制相关文章
相似问题
腾讯云开发者
