模板解析错误:无法绑定到DIRECTIVE,因为它不是'div'的已知属性

Question

我已经查看了有关此错误的问题,但尚未找到解决方案.

我有一个高亮指令,我接受输入index.当我在我正在使用它的模块中声明它时,该指令有效.但是我想在几个模块中使用它,所以我删除了声明,并将它放在导入错误的根模块中.那是我收到错误的时候:

 Error: Template parse errors:
Can't bind to 'index' since it isn't a known property of 'div'. ("
                <div class="read row"
                    appListHighlight
                    [ERROR ->][index]="index"
                >
                    <div class="col"></div>
"): ng:///NetworkModule/DnsComponent.html@15:20

我的指示:

import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';

@Directive({
    selector: '[appListHighlight]'
})
export class ListHighlightDirective implements OnInit{
    @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

    @Input() index: string;

    constructor() {}

    ngOnInit() {

        console.log('APP', this.index);

        if (+this.index % 2 === 0) {
            this.backgroundColor = 'rgba(128, 128, 128, 0.08)'
        }
    }
}

我的HTML:

<div class="read row"
                    appListHighlight
                    [index]="index"
>

html是我的网络模块中的一个组件的一部分,它被导入我的根模块,就像这样

import { ListHighlightDirective } from './shared/list-highlight.directive';
import { NetworkModule } from './network/network.module';

declarations: [
    AppComponent,
    ListHighlightDirective
],

那么发生了什么？当指令导入我的networkModule而不是我的根模块时,为什么会这样？根模块不会编译它导入的应用程序中的所有内容,因此包含了所有导入吗？

--------------------______ UPDATE _____------------------------

我创建了一个共享模块,并导入它,但我得到了同样的错误.我的模块看起来像这样:

import { ListHighlightDirective } from './list-highlight.directive';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    declarations: [
        ListHighlightDirective
    ],
    imports: [
        CommonModule
    ]
})

export class SharedModule { }

Answer 1

Angular模块为与每个声明的组件关联的模板定义模板解析环境.这意味着当解析组件的模板时,它会查看THAT组件的Angular模块以查找所有引用的组件,指令和管道.

对于类似这样的事情,更常见的做法是将其添加appListHighlight到共享模块,然后将该共享模块导入网络模块.

我在这里有关于这些概念的YouTube视频:https://www.youtube.com/watch？v = antJ-P-Kow7o &t = 6s

或者你可以在这里阅读更多相关信息:https://angular.io/guide/ngmodule-faq

在下图中,我使用StarComponent做了类似的事情,StarComponent是一个嵌套的组件,可以将数字转换为评级星.您可以对指令使用相同的技术.