angular - 将 2 输入分配给指令
问题描述
我有以下指令
@Directive({
selector: "[appHasPermission]",
})
export class HasPermissionsDirective implements OnInit, OnDestroy {
@Input("appHasPermission") uavId: number;
@Input("fallbackTemplateRef") fallbackTemplateRef: TemplateRef<any>;
private hasPermissions = false;
private unsubscribe = new Subject<void>();
constructor(
private elementRef: ElementRef,
private viewContainer: ViewContainerRef,
private templateRef: TemplateRef<any>,
private store$: Store<RootStoreState.IAppState>
) {}
ngOnInit() {
this.store$
.pipe(takeUntil(this.unsubscribe), select(UserStoreSelectors.hasPermissionsOnUav(), { uavId: this.uavId }))
.subscribe((hasPermissions) => {
this.hasPermissions = hasPermissions;
this.setElementOperation();
});
}
setElementOperation(): void {
if (this.hasPermissions) {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
if (this.fallbackTemplateRef) {
this.viewContainer.createEmbeddedView(this.fallbackTemplateRef);
}
}
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
基本上,如果用户有权限,则显示元素,否则,显示作为输入提供的模板。
问题是,当我想使用它时:
<button
*appHasPermission="uav.uavId"
[fallbackTemplateRef]="noPermission"
mat-menu-item
(click)="OnReleasePermission.emit(uav)"
我收到提示
无法绑定到“fallbackTemplateRef”,因为它不是“按钮”的已知属性
如果我使用喜欢
<button
[appHasPermission]="uav.uavId"
[fallbackTemplateRef]="noPermission"
mat-menu-item
(click)="OnReleasePermission.emit(uav)"
TemplateRef 没有提供者,使用 *
为什么这样 ?在文档中https://angular.io/guide/attribute-directives#bind-to-a-second-property这应该有效
解决方案
您所指的文档是针对属性指令的。结构指令有不同的语法
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
您应该研究 keyExp。
keyExp = :key ":"? :expression ("as" :local)? ";"?
这意味着您应该按如下方式传递第二个输入:
<button
*appHasPermission="uav.uavId; fallbackTemplateRef: noPermission"
mat-menu-item
(click)="OnReleasePermission.emit(uav)"
或扩展形式:
<ng-template [appHasPermission]="uav.uavId" [fallbackTemplateRef]="noPermission">
<button mat-menu-item
(click)="OnReleasePermission.emit(uav)"
也可以看看:
推荐阅读
- c - 为什么在分配的内存中使用 qsort 后 free 函数会崩溃?
- ios - 让客观 c 代码记住用户在屏幕上触摸过的地方
- java - For循环上的意外令牌
- c++ - C++ 编译错误 LNK2019:未解决的外部符号错误
- excel - 先行 ActiveCell.Address
- kubernetes - 带有微服务的 Kubernetes 网络策略
- c++ - 有没有办法在井字游戏中实现人工智能到计算机?
- c - printf 变量 char 多次
- javascript - JavaScript - 可以在变量声明期间定义先前声明的对象的属性吗?
- flutter - 如何在 Flutter DataColumn 小部件中将标签居中?