来自共享模块的指令不可见
directive from shared module is not visible
尝试深入 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 { }
如果我错了,请纠正我,但据我所知,这里只需要导出指令、管道和组件? Services(Injectables) 可以在我将此模块包含到我的 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 { }
但是当我尝试在我的组件洞察 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 的服务在我将它们添加为 提供者后似乎工作正常:[常量,实用程序] 我的组件
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 版本 2.1.2
您的问题与模块无关;这是模板中使用的语法。
根据错误消息,您使用了 one-way binding syntax - 因为您的 highlight
指令包含在大括号中:
<span ... [highlight] ...></span>
在这种情况下,Angular 将尝试绑定到指令 属性 或元素 属性。您的指令没有名为 highlight
的输入 属性,并且 span
元素没有 highlight
属性,因此会产生错误。
如果您移除大括号,问题应该得到解决:
<span ... highlight ...></span>
尝试深入 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 { }
如果我错了,请纠正我,但据我所知,这里只需要导出指令、管道和组件? Services(Injectables) 可以在我将此模块包含到我的 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 { }
但是当我尝试在我的组件洞察 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 的服务在我将它们添加为 提供者后似乎工作正常:[常量,实用程序] 我的组件
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 版本 2.1.2
您的问题与模块无关;这是模板中使用的语法。
根据错误消息,您使用了 one-way binding syntax - 因为您的 highlight
指令包含在大括号中:
<span ... [highlight] ...></span>
在这种情况下,Angular 将尝试绑定到指令 属性 或元素 属性。您的指令没有名为 highlight
的输入 属性,并且 span
元素没有 highlight
属性,因此会产生错误。
如果您移除大括号,问题应该得到解决:
<span ... highlight ...></span>