Tidak bisa mengikat ke 'x' karena itu bukan properti yang diketahui dari 'y'

Saya memiliki situs angular yang berisi komponen di dalam komponen lain. Saya menggunakan routing dan lazy loading komponen luar (ComponentA). Komponen dalam (KomponenB) bergantung pada direktif pihak ketiga.

Ini bukti konsep (buka konsol untuk melihat error).

Saya mendapatkan error ketika menggunakan direktif pihak ketiga di dalam ComponentB. Ini bukanlah error pada directive itu sendiri, tetapi error pada bagaimana saya menyusun kode saya.

<tree-root [nodes]="nodes"></tree-root>

Tidak bisa mengikat ke 'nodes' karena itu bukan properti yang diketahui dari 'tree-root'

Saya dapat menyelesaikan masalah ini dengan mengimpor modul pihak ketiga di ComponentA tetapi karena ComponentA tidak bergantung pada modul ini, rasanya salah untuk melakukannya.

Plunker yang saya buat adalah bagian yang sangat kecil dari aplikasi saya, yang dirancang untuk mengisolasi masalah. Ini untuk mendemonstrasikan sebuah konsep, bukan untuk membuat aplikasi yang masuk akal. Apa yang ingin saya capai adalah membuat komponen yang dapat ditambahkan ke halaman mana pun. Komponen ini bisa berupa widget atau semacamnya, yang ditambahkan ke satu atau lebih halaman induk. Komponen ini berdiri sendiri.

Pengetahuan saya yang terbatas dalam Angular mulai terlihat di sini. Karena komponen seharusnya memungkinkan kita untuk melakukan pengembangan berbasis komponen yang memecah aplikasi kita menjadi bagian-bagian yang lebih kecil, saya tidak mengerti mengapa ComponentA perlu mengetahui dependensi apa yang dimiliki ComponentB untuk menggunakannya dalam tampilannya.

Saya juga akan menunjukkan bahwa ini hanya masalah karena saya memiliki direktif pihak ketiga yang disertakan dalam ComponentB. Jika saya menghapus directive tersebut, semua akan berfungsi. Sebagai contoh jika saya melakukan hal seperti ini:

<ul>
    <li *ngFor="let node of nodes">
        {{ node.name }}
    </li>
</ul>

aplikasi berjalan dengan baik tanpa kesalahan.

Apa yang telah saya lakukan salah dan apa yang harus saya lakukan secara berbeda? Jika solusinya adalah dengan menambahkan import ke ComponentA, saya akan menerimanya sebagai jawaban yang diberikan penjelasan yang baik (seperti mengapa *ngFor bekerja tetapi arahan tree-root tidak bekerja).

Michael
Pertanyaan edit 16 April 2018 в 7:45
Pemrograman
angular typescript
20 April 2017 в 2:48
Belum ada tampilan
Larutan

Saya kembali ke awal dan menyadari apa yang saya lewatkan:

Di feature-b.module.ts saya seharusnya mengekspor komponen:

exports: [
    FeatureBComponent
]

Saya juga perlu mengimpor FeatureBModule daripada FeatureBComponent.

import {FiturBComponent } from '../feature-b/feature-b.component';</strike>

import { FeatureBModule } from '../feature-b/feature-b.module';
Komentar (1)

Saya bisa menjalankan aplikasi dengan menghapus FeatureBModule sepenuhnya. Maka FeatureAModule sudah benar karena perlu menghapus FeatureBComponent.

FeatureAModule kemudian terlihat seperti ini:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';

import { FeatureAComponent }           from './feature-a.component';
import { FeatureARoutingModule }       from './feature-a-routing.module';
import { TreeModule }                  from 'angular-tree-component';

import { FeatureBComponent } from '../feature-b/feature-b.component';

@NgModule({
  imports: [
    CommonModule,
    FeatureARoutingModule,
    TreeModule
  ],
  declarations: [
    FeatureAComponent,
    FeatureBComponent
  ]
})
export class FeatureAModule {}

Saya memperbarui plunker di sini: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

Komentar (3)

Saya baru saja mengalami hal yang sama, dan masalahnya adalah saya memiliki kasus yang salah ('a' vs 'A') untuk komponen tersebut.

Dalam template komponen induk saya, saya punya:

Bukannya

Komentar (0)