來自共享模塊的指令是不可見的

試圖潛入具有角度1的一些經驗和有一些謎題的角2。來自共享模塊的指令是不可見的

我做了一個共享的模塊：

import { NgModule }  from '@angular/core'; 
import { CommonModule }  from '@angular/common'; 

import { Constants } from './injectables/constants'; 
import { Utils } from "./injectables/utils"; 
import { HighlightDirective } from "./directives/highlight"; 

@NgModule({ 
    imports: [ CommonModule ], 
    declarations: [ HighlightDirective ], 
    providers: [ Constants, Utils ], 
    exports: [ HighlightDirective ] 
}) 
export class VCommonModule { }

糾正我，如果我錯了，但我只理解爲指令，管道和部件，這裏需要出口？在包含此模塊以導入我的AppModule後，可以立即使用服務（Injectables）？所以我做了：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { VCommonModule } from './common/module'; 
import { FormsModule } from "@angular/forms"; 

import { AppComponent } from './faq/components/app'; 
import { SearchComponent } from './faq/components/search'; 
import { ArticleComponent } from "./faq/components/article"; 
import { TopResultsComponent } from "./faq/components/topResults"; 
import { AjaxService } from "./faq/injectables/ajaxService"; 
import './rxjs-operators'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule, HttpModule, VCommonModule ], 
    declarations: [ AppComponent, SearchComponent, ArticleComponent, TopResultsComponent ], 
    providers: [ AjaxService ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

但是當我試圖用[亮點]指令在我的組件洞察力的AppModule它讓我看到了一個錯誤，VCommonModule

zone.js:388 Unhandled Promise rejection: Template parse errors: 
Can't bind to 'highlight' since it isn't a known property of 'span'. ("   <br/> 
       <span [innerHTML]="article.Content__c" 
         [ERROR ->][highlight] 
         keywords="test"></span> <!-- [innerHTML]="article.Content__c | "): [email protected]:26 ; Zone: <root> ; Task: Promise.then ; Value: Error:

服務似乎好我加後的作品它們作爲提供商：[常量，的Utils]我的組件的

import {Directive, Input, ElementRef, Renderer, OnChanges} from "@angular/core"; 

@Directive({ 
    selector: '[highlight]' 
}) 
export class HighlightDirective implements OnChanges{ 
    @Input() 
    keywords:string; 

    highlightClass: string = 'highLight'; 

    constructor(
     private elementRef:ElementRef, 
     private renderer:Renderer) { 
    } 

    replacer(match, item) { 
     return `<span class="${this.highlightClass}">${match}</span>`; 
    } 

    tokenize(keywords) { 
     keywords = keywords.replace(new RegExp(',$','g'), '').split(','); 
     return keywords.map((keyword) => { 
      return '\\b'+keyword.replace(new RegExp('^ | $','g'),  '')+'\\b'; 
     }); 
    } 

    ngOnChanges() { 
     if (this.keywords) { 
      var tokenized = this.tokenize(this.keywords); 
      var regex = new RegExp(tokenized.join('|'), 'gmi'); 

      var html =  this.elementRef.nativeElement.innerHTML.replace(regex, (match, item) => { 
       return this.replacer(match, item); 
      }); 

      this.renderer.setElementProperty(this.elementRef.nativeElement,  'innerHTML', html); 
     } 
    } 
}

PS：角版本2.1.2

來源

2016-11-03 Fedor Skrynnikov

你可以添加你的'HighlightDirective'類的實現？ –

確定匹配，完成 –

刪除模板中'highlight'周圍的括號;它應該被標記爲正常屬性。 – cartant

您的問題與模塊無關;這是模板中使用的語法。

根據錯誤信息，您已經使用了one-way binding syntax - 爲您的highlight指令括在大括號：

<span ... [highlight] ...></span>

在這種情況下，角將嘗試綁定到一個指向性或元素屬性。您的指令沒有名爲highlight的輸入屬性，而span元素沒有highlight屬性，因此會出現錯誤。

如果去掉括號，這個問題應該得到解決：

<span ... highlight ...></span>

來源

2016-11-04 06:46:22 cartant

來自共享模塊的指令是不可見的

回答

相關問題