Can't bind to 'x' since it isn't a

问题:

I have an angular site that contains a component inside another component. I'm using routing and lazy loading the outer component (ComponentA). The inner component (ComponentB) depends on a 3rd party directive.

Here's the proof of concept (open the console to see the error).

I'm getting an error when using the 3rd party directive inside ComponentB. This isn't an error with the directive itself but an error with how I've structured my code.

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

Can't bind to 'nodes' since it isn't a known property of 'tree-root'

I can solve this issue by importing the 3rd party module in the ComponentA but since ComponentA doesn't depend on this module, it feels wrong to do so.

The Plunker I have created is a very small portion of my app, designed to isolate the issue. It's to demonstrate a concept, not to make sense as an app. What I'm trying to achieve is to create a component that can be added to any of my pages. This component could be a widget or something, added to one or more parent pages. It is self contained.

My limited knowledge in Angular is starting showing here. Since components are supposed to allow us to do component based development breaking our application into smaller parts, I don't understand why ComponentA needs to know what dependencies ComponentB has in order to use it in its view.

I'll also demonstrate that this is only an issue because I have a 3rd party directive included in ComponentB. If I remove the directive, all works. For example if I did something like this instead:

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

the app runs fine with no errors.

What have I done wrong and what should I be doing differently? If the solution is to add an import to ComponentA, I will accept that as an answer given a good explanation is provided (such as why *ngFor works but the tree-root directive doesn't).

回答1:

I went back to the start and realised what I missed:

In feature-b.module.ts I should have exported the component:

exports: [
    FeatureBComponent
]

It was also necessary for me to import FeatureBModule rather than FeatureBComponent.

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

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

回答2:

I was able to get the application running by removing FeatureBModule entirely. Then the FeatureAModule is correct as it needs to then delcare FeatureBComponent.

The FeatureAModule then looks like this:

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

I updated the plunker here: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

回答3:

I just experienced the same, and the problem was that I had the wrong case ('a' vs 'A') for the component.

In my parent component's template, I had:

<mychild-component></mychild-component>

Instead of

<myChild-component></myChild-component>

回答4:

Had a similar scenario to MMalke. By default Angular adds the prefix app- to the selector name of a component when the component is generated via the command line interface. I should have written <app-my-component><app-my-component> but I wrote <my-component><my-component> instead. FYI, check to make sure the component's selector name matches what's in your HTML.