Không thể liên kết với 'x' vì nó không phải là thuộc tính đã biết của 'y'

Question

Tôi có một trang web góc có chứa một thành phần bên trong một thành phần khác. Tôi đang sử dụng định tuyến và tải lười biếng các thành phần bên ngoài (ComponentA). Thành phần bên trong (ComponentB) phụ thuộc vào chỉ thị của bên thứ ba.

Đây là PoC: https://plnkr.co/edit/7maVz2vO9LKTli47hyWl?p=info (mở bảng điều khiển để xem lỗi).

Tôi gặp lỗi khi sử dụng chỉ thị của bên thứ 3 bên trong ComponentB. Đây không phải là lỗi với chính chỉ thị mà là lỗi với cách tôi đã cấu trúc mã của mình.

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

Không thể liên kết với 'nút' vì nó không phải là một tài sản của 'cây root' nổi tiếng

tôi có thể giải quyết vấn đề này bằng cách nhập các module bên thứ 3 trong ComponentA nhưng vì ComponentA không phụ thuộc vào module này, nó cảm thấy sai khi làm như vậy.

Máy nhắn tin mà tôi tạo ra là một phần rất nhỏ trong ứng dụng của mình, được thiết kế để tách biệt vấn đề. Đó là để chứng minh một khái niệm, không có ý nghĩa như một ứng dụng. Những gì tôi đang cố gắng đạt được là tạo một thành phần có thể được thêm vào bất kỳ trang nào của tôi. Thành phần này có thể là tiện ích hoặc nội dung nào đó, được thêm vào một hoặc nhiều trang gốc. Nó là khép kín.

Kiến thức hạn chế của tôi trong Angular đang bắt đầu hiển thị tại đây. Vì các thành phần có nghĩa vụ cho phép chúng ta phát triển dựa trên thành phần, phá vỡ ứng dụng của chúng ta thành các phần nhỏ hơn, tôi không hiểu tại sao ComponentA cần biết những thành phần phụ thuộc mà ComponentB có để sử dụng nó trong quan điểm của nó.

Tôi cũng sẽ chứng minh rằng đây chỉ là vấn đề vì tôi có chỉ thị của bên thứ 3 được bao gồm trong ComponentB. Nếu tôi loại bỏ các chỉ thị, tất cả các công trình. Ví dụ: nếu tôi đã làm điều gì đó tương tự thay thế:

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

ứng dụng chạy tốt mà không bị lỗi.

Tôi đã làm gì sai và tôi nên làm gì khác? Nếu giải pháp là để thêm một nhập khẩu vào ComponentA, tôi sẽ chấp nhận rằng như là một câu trả lời cho một lời giải thích tốt được cung cấp (chẳng hạn như lý do tại sao * ngFor công trình nhưng chỉ thị gốc cây không).

Answer 1

tôi trở về điểm bắt đầu và nhận ra những gì tôi đã bỏ lỡ:

Trong feature-b.module.ts tôi nên có đã xuất thành phần:

exports: [ 
    FeatureBComponent 
] 

Tôi cũng cần nhập FeatureBModule thay vì FeatureBComponent.

nhập {FeatureBComponent} từ '../feature-b/feature-b.thành phần ';

import { FeatureBModule } from '../feature-b/feature-b.module'; 

Answer 2

Tôi có thể chạy ứng dụng bằng cách xóa hoàn toàn FeatureBModule. Sau đó, các FeatureAModule là chính xác như nó cần phải sau đó delcare FeatureBComponent.

Các FeatureAModule sau đó trông như thế này:

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 {} 

tôi cập nhật các plunker đây: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview