使用自定义结构指令会在控制台中引发错误？答案

【问题标题】：using custom structural directive throws an error in console?使用自定义结构指令会在控制台中引发错误？
【发布时间】：2019-06-28 15:43:50
【问题描述】：

您好，我创建了一个结构指令。但是使用它会引发错误。以下是我的结构指令代码。

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

@Directive({
  selector: '[pcHasCampaignBudgetEnabled]'
})
export class HasCampaignBudgetEnabledDirective {

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

 @Input() 
 set pcHasCampaignBudgetEnabled(account:Account){
    if(account && account.budget){
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear()
    }
  }

}

我在我的根模式下声明了这个结构指令。我在组件模板中使用它，如下所示。

  <ng-container *pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true">
      <pc-header-cell *cdkHeaderCellDef>
        {{ 'LABELS.BUDGET' | translate }} ({{ currencySymbol }})
      </pc-header-cell>
      <cdk-cell *cdkCellDef="let row">
        {{ row.budget | number }}
      </cdk-cell>
    </ng-container>

我是如何从开发工具中收到以下错误的。

Uncaught Error: Template parse errors:
Can't bind to 'pcHasCampaignBudgetEnabled' since it isn't a known property of 'ng-container'.
1. If 'pcHasCampaignBudgetEnabled' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </ng-container>

    <ng-container [ERROR ->]*pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true">
      <pc-he"): ng:///AppModule/CampaignsAwaitingPanelComponent.html@40:18
Property binding pcHasCampaignBudgetEnabled not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
    </ng-container>

    [ERROR ->]<ng-container *pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true""): ng:///AppModule/CampaignsAwaitingPanelComponent.html@40:4
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24667)
    at JitCompiler._parseTemplate (compiler.js:34620)
    at JitCompiler._compileTemplate (compiler.js:34595)
    at eval (compiler.js:34496)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34496)
    at eval (compiler.js:34366)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34365)

非常感谢任何帮助，谢谢

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

您需要将该指令导入到您的 component.module.ts 像这样：

import { HasCampaignBudgetEnabledDirective } from './HasCampaignBudgetEnabledDirective ';

@NgModule({
  imports: [
    ...
  ],
  declarations: [ComponentPage, HasCampaignBudgetEnabledDirective ]
})

【讨论】：

@knowkedgeseeker 你应该在创建指令后将指令导入到你的模块中。