テンプレート解析エラー： 'div'の既知のプロパティではないため、DIRECTIVEにバインドできません。

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にインポートされ、ルートモジュールはインポートされていないと、これはなぜ機能しますか？ルートモジュールは、インポートするアプリケーションのすべてをコンパイルしないので、すべてのインポートが組み込まれますか？

--------------------______更新日_____------------------------

共有モジュールを作成してインポートしましたが、同じエラーが発生しています。私のモジュールは次のようになります。

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を共有モジュールに追加してから、その共有モジュールをネットワークモジュールにインポートすることです。

私はここで、これらの概念についてのユーチューブのビデオを持っている：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で直接宣言されたコンポーネントに対してのみディレクティブがチェックされます。

解決策？

一般的な解決方法は、モジュールを使用するコンポーネントを宣言する各モジュールでディレクティブを宣言することです。もう1つのオプションは、ディレクティブを共有モジュールに追加し、コンポーネントがディレクティブを使用する他のすべてのモジュールで共有モジュールを使用することです。