javascript - 以 String 作为输入的 angular2 结构指令

标签 javascript angular angular2-directives

我正在尝试使用给定的示例创建结构指令 here

只需修改以在此处将字符串作为输入传递,我在调用此指令表单标记时将“未定义”作为输入值。

@Input() set myUnless(value: String) {
    if (value=== 'something') {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

有什么帮助可以实现这个目标吗?

编辑: 想法是创建一个 hasRole 指令,它接受一个作为字符串的 Angular 色,并根据是否在存储在本地存储中的 Angular 色中找到它返回 bool 值。

实现代码为:

 <a routerLink="/list" *unless="ADMIN">
          <i class="fa fa-list"></i> <span>List</span>
 </a>

指令代码如下:

import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[unless]' })
export class Unless {
    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) { }
    @Input() set unless(role: String) {
        return localStorage.getItem('roles').indexOf(role) > -1;
    }
}

最佳答案

您的组件的属性 ADMIN 实际上是 undefined ;-)

改用

*unless="'ADMIN'"

关于javascript - 以 String 作为输入的 angular2 结构指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39423994/

相关文章:

angular - 如何使用 Rx 在 Angular 2 中实现可拖动的 div

angular - 使用指令 Angular 2 更改输入的 ngModel 值

angular - 在 Angular2 中传递组件

c# - 动态生成 jQuery 函数 mvc 4 razor

javascript - 视口(viewport)中幻灯片上的滑动 slider 事件类和仅一张幻灯片上的当前类

angular - 更改从单个 nginx 服务器提供的多个 Angular 应用程序的顶级路由?

angular - 如何使用 RxJS 处理数百个请求而不崩溃?

javascript - 无法在客户端呈现 EJS 模板

javascript - 通过复选框过滤 div

angular - HTML 模板不会更新,除非我使用 changeDetection onpush 调用 detectChanges()