模板解析错误：无法绑定到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模块为与每个声明的组件关联的模板定义模板解析环境。这意味着当解析组件的模板时，它会查看该组件的Angular模块以查找所有引用的组件，指令和管道。

更常见的做法是将appListHighlight添加到共享模块，然后将该共享模块导入网络模块。

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

或者您可以在此处详细了解：https://angular.io/guide/ngmodule-faq

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

Answer 2

您收到的错误是因为该组件超出了导入位置的范围。它在您的子模块中工作的原因是因为该组件是在该子模块中声明的。它在其他模块中不起作用的原因是因为组件或指令未在模块中声明。

为什么？

在运行时，Angular会根据具体情况查看每个模块。如果在子模块中声明该指令，它将检查该模块中声明的组件并使用该指令。如果在app.module中声明了该指令，它将仅检查app.module中直接声明的组件。

解？

一般的解决方案是，您应该在声明使用它的组件的每个模块中声明一个指令。另一个选择是将指令添加到共享模块中，并在组件使用该指令的每个其他模块中使用共享模块。

Answer 3

要在其他模块中使用模块的组件或指令，您需要在@NgModule装饰器的两个位置（声明和导出）对其进行定义。
在您的SharedModule中，您没有在导出数组中声明它。像他一样添加导出数组

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

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

})

export class SharedModule { }

现在无论您要导入 SharedModule 的何处，您都可以使用其导出的成员（组件/指令）。
对于此示例，可以使用ListHighlightDirective。