自定义指令:由于它不是element的已知属性,因此无法绑定到指令

我正在尝试创建一个允许我声明变量的指令(我以前一直在使用ngIf来执行此操作,但我不喜欢这样做)。基于此处的第二个答案:如何在Angular2的模板中声明变量

我有指令

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appVar]',
})
export class VarDirective {
  @Input()
  set ngVar(context: any) {
    (this.context as any).$implicit = (this.context as any).ngVar = context;
    this.updateView();
  }

  context = {};

  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) { }

  updateView() {
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, this.context);
  }
}

我已经从共享模块中声明并导出了它:

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ...
    VarDirective
  ],
  exports: [
    ...
    VarDirective
  ]
})
export class SharedModule {}

我正在尝试将其导入模块中。但是,当我尝试:

<div *appVar="'test' as dataState">

我收到错误Can't bind to 'appVar' since it isn't a known property of 'div'.我看到的所有其他答案似乎与指令不在范围内(从模块等导出)有关。但是,我知道该appVar指令在范围内,因为如果删除星号,则不会立即出现问题:

<div appVar="'test' as dataState">

但是,如果没有星号,则在加载组件时会遇到此问题:

Angular2没有TemplateRef的提供者!(NgIf-> TemplateRef)

并得到一个错误 Error: No provider for TemplateRef!

贡特·佐赫鲍尔(GünterZöchbauer)

输入名称需要与选择器匹配才能通过这种方式分配

@Input()
set appVar(context: any) {

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法绑定到“ ngModel”,因为它不是已知的本机属性或已知指令

Angular 2:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

Angular 2+和Observables:由于它不是'select'的已知属性,因此无法绑定到'ngModel'

Angular 2:由于它不是已知的本机属性,因此无法绑定到x

角度6:失败:模板解析错误:由于它不是'a'的已知属性,因此无法绑定到'routerLink'。(

尽管导入了FormsModule,但由于它不是'input'的已知属性,因此无法绑定到'ngModel'

角度灯箱:由于它不是“ a”的已知属性,因此无法绑定到“数据灯箱”

Angular4异常:由于它不是'input'的已知属性,因此无法绑定到'ngClass'

angular2测试:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

Angular2异常:由于它不是已知的本机属性,因此无法绑定到“ routerLink”

角2:模板解析错误:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

模板解析错误:由于它不是'a'的已知属性,因此无法绑定到'routerLink'

AngularJS 2:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

模板解析错误:由于它不是'div'的已知属性,因此无法绑定到DIRECTIVE

angular 4:由于它不是'li'的已知属性,因此无法绑定到'ngForFor'

Angular7-由于它不是'mat-table'的已知属性,因此无法绑定到'dataSource'

模板解析错误:由于它不是'input'的已知属性,因此无法绑定到'ngbTypeahead'

角度7:无法绑定到“指令”,因为它不是“元素”的已知属性

隐藏ionic2中的元素:由于它不是已知的本机属性,因此无法绑定到'* ngIf'

angular 5-ng2-file-upload:由于它不是'div'的已知属性,因此无法绑定到'uploader'

模板解析错误:由于它不是Angular 2中的已知本机属性,因此无法绑定到“ ng-class”

未捕获(承诺):错误:模板解析错误:由于它不是“输入”的已知属性,因此无法绑定到“上载器”

控制台Angular 9中的警告:由于它不是'li'的已知属性,因此无法绑定到'ngForOf'

Angular2快速入门教程突破业力测试-“由于它不是'input'的已知属性,因此无法绑定到'ngModel'。

角度6:由于不是'form'的已知属性,因此无法绑定到'formGroup'吗?

无法绑定到属性,因为它不是组件的已知属性

无法绑定到“属性”,因为它不是“组件”的已知属性

无法绑定到“ startingCategory”,因为它不是“ div”的已知属性

无法绑定到“ mdDatepicker”,因为它不是“ input”的已知属性