использование пользовательской структурной директивы выдает ошибку в консоли? - PullRequest
Новая
       13

использование пользовательской структурной директивы выдает ошибку в консоли?

0 голосов
/ 28 июня 2019

Привет, я создал структурную директиву. однако его использование выдает ошибку. Ниже приведен мой код для структурной директивы. 

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()
    }
  }

}

Я объявлен этой структурной директивой в моем режиме root. Я использую его как следует из шаблона компонента. 

  <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)

очень ценю любую помощь, спасибо

1 Ответ

1 голос
/ 28 июня 2019

Вам необходимо импортировать эту директиву в ваш component.module.ts Вот так: 

import { HasCampaignBudgetEnabledDirective } from './HasCampaignBudgetEnabledDirective ';

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