Exploring the world of Angular 2 after having some hands-on experience with Angular 1 and encountering a few challenges.
I've created a 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 { }
If I understood correctly, only directives, pipes, and components need to be exported in this module. Services (Injectables) can be used directly after including this module in the imports of my AppModule. So, that's exactly what I did:
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 { }
However, when attempting to use the [highlight] directive within my component inside AppModule, an error is displayed.
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:
The services from VCommonModule seem to work fine after adding them as providers: [ Constants, Utils ] in 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