模板解析错误：无法绑定到 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
],

那么发生了什么事？为什么当指令被导入到我的网络模块而不是我的根模块时这会起作用？根模块不会编译它导入的应用程序中的所有内容，因此所有导入都包含在内吗？

--------------------______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 做了类似的事情，它是一个嵌套组件，可以将数字转换为评级星。您可以对指令使用相同的技术。

Answer 2

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

为什么？

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

中声明的组件

解决方案？

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

Answer 3

要在其他模块中使用模块的组件或指令，您需要在@NgModule 装饰器的两个地方定义它，declarations 和 exports。
在您的 SharedModule 中，您没有在 exports 数组中声明它。添加像 his

这样的导出数组

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，您都可以使用它的导出成员 (components/directives)。
对于此示例，您可以使用 ListHighlightDirective。

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

Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'

angular-directive

angular

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

Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'

angular-directive

angular

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