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

问题描述

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

我有一个highlight指令，我输入了一个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 { }

解决方案

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

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

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

或者您可以在此处阅读有关此内容的更多信息: https://angular.io/guide/ngmodule-faq

在下面的图片中，我对StarComponent进行了类似的操作，StarComponent是一个嵌套的组件，可以将数字转化为星级.您可以对指令使用相同的技术.

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.

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