공유 모듈의 지시문을 볼 수 없습니다.

Question

각도 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)를 사용할 수 있습니까? 내 구성 요소 통찰력에서 [하이라이트] 지시어를 사용하려고 해요 때 나에게 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 | "): SearchComponent@39:26 ; Zone: <root> ; Task: Promise.then ; Value: Error: 

서비스가 내가 추가 한 후 잘 작동 보인다 오류가 표시 AppModule

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

그러나 : 그래서 내가 그랬어 그와 같은 제공 : [상수,의 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

Answer 1

문제점은 모듈과 관련이 없습니다. 템플릿에서 사용되는 구문입니다.

오류 메시지에 따르면, 당신이 사용했던 one-way binding syntax - 당신의 highlight 지시어는 중괄호로이 상황에서

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

, 각도는 지시 속성이나 요소에 바인딩을 시도합니다 재산. 지시문에 highlight이라는 입력 속성이없고 span 요소에는 highlight 속성이 없으므로 오류가 발생합니다. 당신은 괄호를 제거하면

, 문제가 해결되어야한다

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