Tengo un sitio angular que contiene un componente dentro de otro componente. Estoy usando enrutamiento y carga diferida del componente externo (ComponentA). El componente interno (ComponentB) depende de una directiva de terceros.
Aquí está la prueba de concepto (abre la consola para ver el error).
Recibo un error cuando uso la directiva de terceros dentro de ComponentB. Esto no es un error con la directiva en sí, sino un error con la forma en que estructuré mi código.
<tree-root [nodes]="nodes"></tree-root>No se puede vincular a 'nodos' ya que no es una propiedad conocida de 'tree-root'
Puedo resolver este problema importando el módulo de terceros en el ComponentA, pero dado que el ComponentA no depende de este módulo, parece incorrecto hacerlo.
El Plunker que he creado es una parte muy pequeña de mi aplicación, diseñada para aislar el problema. Es para demostrar un concepto, no para que tenga sentido como aplicación. Lo que estoy tratando de lograr es crear un componente que se pueda agregar a cualquiera de mis páginas. Este componente podría ser un widget o algo así, agregado a una o más páginas principales. Es autónomo.
Mi conocimiento limitado en Angular está comenzando a mostrarse aquí. Dado que se supone que los componentes nos permiten hacer un desarrollo basado en componentes dividiendo nuestra aplicación en partes más pequeñas, no entiendo por qué ComponentA necesita saber qué dependencias tiene ComponentB para poder usarlo en su opinión.
También demostraré que esto es solo un problema porque tengo una directiva de terceros incluida en ComponentB. Si elimino la directiva, todo funciona. Por ejemplo, si hiciera algo como esto en su lugar:
<ul> <li *ngFor="let node of nodes"> {{ node.name }} </li> </ul>la aplicación funciona bien sin errores.
¿Qué he hecho mal y qué debo hacer diferente? Si la solución es agregar una importación a ComponentA, aceptaré que se proporcione una buena explicación como respuesta (por ejemplo, por qué *ngFor funciona pero la directiva tree-root no).
Volví al principio y me di cuenta de lo que me perdí:
En feature-b.module.ts debería haber exportado el componente:
exports: [ FeatureBComponent ] También fue necesario para mí importar FeatureBModule en lugar de FeatureBComponent .
import { FeatureBComponent } from '../feature-b/feature-b.component';
import { FeatureBModule } from '../feature-b/feature-b.module';Pude ejecutar la aplicación eliminando FeatureBModule por completo. Entonces, FeatureAModule es correcto, ya que necesita eliminar FeatureBComponent.
El FeatureAModule entonces se ve así:
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 {}Actualicé el plunker aquí: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview
Puede obtener este error en las directivas en las que está vinculando el atributo que adjunta la directiva en sí, pero tiene la Entrada correspondiente decorada incorrectamente.
@Directive({ selector: '[myDirective]' }) export class MyDirective { @Input('mydirectiveSpelledDifferently') data: any; } La entrada en el ejemplo tiene "mydirectiveSpelledDifferently" pero debe coincidir con el selector (es decir "myDirective" ).
Sabrá que este es el problema en su caso cuando funciona de esta manera:
<div myDirective>Pero falla de esta manera:
<div [myDirective]="something"> El caso de trabajo es encontrar correctamente el selector que eligió para su directiva. El caso fallido busca la decoración @Input() y falla porque no existe como @Input('myDirective') en su directiva.