来自共享模块的指令不可见答案

【问题标题】：directive from shared module is not visible来自共享模块的指令不可见
【发布时间】：2017-03-17 16:27:21
【问题描述】：

尝试深入了解 Angular 2，在 Angular 1 方面有一些经验并遇到一些难题。

我做了一个共享模块：

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 的导入中后，是否可以立即使用 Services(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 中使用 [highlight] 指令时，它会显示一个错误

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:

来自 VCommonModule 的服务在我将它们添加为我的组件的 providers: [ Constants, 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

【问题讨论】：

你能添加你的HighlightDirective类实现吗？
确定，完成
去掉模板中highlight周围的括号；它应该被标记为普通属性。
嘿卡坦...谢谢。你介意把你的建议作为答案吗
或者您可以将@Input() highlight: any 添加到您的HighlightDirective。

标签： angular typescript angular2-directives angular2-services

【解决方案1】：

您的问题与模块无关；这是模板中使用的语法。

根据错误消息，您使用了one-way binding syntax - 因为您的highlight 指令用大括号括起来：

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

在这种情况下，Angular 将尝试绑定到指令属性或元素属性。您的指令没有名为highlight 的输入属性，并且span 元素没有highlight 属性，因此会产生错误。

如果去掉大括号，问题应该会解决：

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

【讨论】：