directive from shared module is not visible

问题

Trying to dive into angular 2 having some experience in angular 1 and having some puzzles.

I made one shared module:

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 { }

correct me if I'm wrong, but as I understood only directives,pipes and components needs to be exported here? Services(Injectables) could be used straight away after I include this module to imports of my AppModule? So I did that:

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 { }

But when I'm trying to use [highlight] directive in my component insight AppModule it shows me an error

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 | "): SearchComponent@39:26 ; Zone: <root> ; Task: Promise.then ; Value: Error: 

services from VCommonModule seems works fine after I added them as providers: [ Constants, Utils ] of my component

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: angular version 2.1.2

回答1:

Your problem is not related to the modules; it's the syntax used in the template.

According to the error message, you've used the one-way binding syntax - as your highlight directive is enclosed in braces:

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

In this situation, Angular will attempt to bind to a directive property or to an element property. Your directive has no input property named highlight and the span element has no highlight property, so an error is effected.

If you remove the braces, the issue should be resolved:

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

来源：https://stackoverflow.com/questions/40412477/directive-from-shared-module-is-not-visible