模板解析错误:无法绑定到 DIRECTIVE，因为它不是“div"的已知属性 [英] Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'

问题描述

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

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

 错误:模板解析错误:无法绑定到index"，因为它不是div"的已知属性.("<div class="读取行"应用列表突出显示[错误 ->][索引]="索引"><div class="col"></div>"): ng:///NetworkModule/DnsComponent.html@15:20

我的指令:

import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';@指示({选择器:'[appListHighlight]'})导出类 ListHighlightDirective 实现 OnInit{@HostBinding('style.backgroundColor') backgroundColor = '透明';@Input() 索引:字符串；构造函数(){}ngOnInit() {console.log('APP', this.index);if (+this.index % 2 === 0) {this.backgroundColor = 'rgba(128, 128, 128, 0.08)'}}}

我的 html:

html 是我的网络模块中组件的一部分，它像这样导入到我的根模块中

import { ListHighlightDirective } from './shared/list-highlight.directive';从 './network/network.module' 导入 { NetworkModule };声明: [应用组件，列表突出显示指令],

所以发生了什么?为什么在将指令导入到我的 networkModule 而不是我的根模块时这会起作用?根模块不会编译它导入的应用程序中的所有内容，以便包含所有导入吗?

----------------------------UPDATE____------------------------

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

import { ListHighlightDirective } from './list-highlight.directive';从'@angular/common'导入{CommonModule}；从'@angular/core' 导入 { NgModule };@NgModule({声明: [列表突出显示指令],进口:[通用模块]})导出类 SharedModule { }

解决方案

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

对于这种情况，更常见的做法是将 appListHighlight 添加到共享模块，然后将该共享模块导入您的网络模块.

我有一个关于这些概念的 YouTube 视频:

I have looked at the questions regarding this error, and have not found a solution.

I have a highlight directive, and I take an input index. This directive works when I declare it in the module I'm using it in. But I want to use it in several modules, So I removed the declaration, and put it inside of my root module that imports the errors. That is when I get the error:

 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

My directive:

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)'
        }
    }
}

my html:

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

the html is part of a component inside my network module, which is imported into my root module like so

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

declarations: [
    AppComponent,
    ListHighlightDirective
],

So what is happening? why does this work when the directive is imported to my networkModule, but not my root module? doesn't the root module compile everything in the app that it imports so all the imports are included?

--------------------______UPDATE_____------------------------

I created a shared module, and imported it, but i'm getting the same error. my module looks like this:

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

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

export class SharedModule { }

解决方案

An Angular module defines the template resolution environment for the template associated with every declared component. That means that when a component's template is parsed, it looks to THAT component's Angular module to find all of the referenced components, directives, and pipes.

A more common practice for something like this is to add the appListHighlight to a Shared module and then import that Shared module into your network module.

I have a youtube video about these concepts here: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=6s

Or you can read more about this here: https://angular.io/guide/ngmodule-faq

In the picture below, I do something similar with the StarComponent, which is a nested component that turns a number into rating stars. You can use this same technique for your directive.

这篇关于模板解析错误:无法绑定到 DIRECTIVE，因为它不是“div"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！