У меня угловой участок, который содержит компонент внутри другого компонента. Я'м с помощью маршрутизации и ленивая загрузка внешних компонент (компоненты). Внутренний компонент (ComponentB) зависит от 3-й директивы партии.
Здесь'ы концептуального (открыть консоль, чтобы увидеть ошибки).
Я'м получаю сообщение об ошибке при использовании 3 участника директивы внутри ComponentB. Это'т ошибка с самой директиве, но сообщение об ошибке, как я'вэ структурированных мой код.
в
<tree-root [nodes]="nodes"></tree-root>
можете'т привязать к 'узлов' так как она еще'т известное свойство 'дерево-корень'
Я могу решить эту проблему путем импорта 3 участника модуля в компоненты, но поскольку компоненты не'т зависит от этого модуля, это неправильно, чтобы сделать так.
В Plunker я создал очень небольшая часть моего приложения, разработан, чтобы изолировать проблему. Это's, чтобы продемонстрировать концепцию, не имеет смысла в качестве приложения. То, что я'м пытаюсь добиться-создать компонент, который может быть добавлен к любой из моих страниц. Этот компонент может быть виджет или что-то, добавить к одному или более родительских страниц. Он самодостаточен.
Мои ограниченные знания в угловых начинает показывать здесь. Поскольку компоненты должны позволить нам сделать компонент на основе развития ломать наше приложение на более мелкие части, я не'т понять, почему компоненты должен знать, что зависимости ComponentB для того, чтобы использовать его в своих целях.
Я'll тоже продемонстрировать, что это только проблема, потому что у меня 3-й директивы партии включенными в ComponentB. Если я удалить директивы, все работает. Например, если я сделал, а не что-то вроде этого:
<ul>
<li *ngFor="let node of nodes">
{{ node.name }}
</li>
</ul>
приложение работает нормально, без ошибок.
Что я сделал не так и что я должен делать по-другому? Если решение заключается в добавлении импортировать компоненты, я приму это как ответ дал хорошее объяснение (например, почему *ngFor
работает, но директивы корень
не'т).
Я вернулся к началу и понял, что я пропустил:
В вашем распоряжении-б.модуль.Ц Я должен был экспортировать компонент:
exports: [
FeatureBComponent
]
Это также было необходимо для меня, чтобы импортировать FeatureBModule", а не " FeatureBComponent
.
<удар>импорт { FeatureBComponent } с '../характеристика-б/характеристика-б.компонент';</удара>
import { FeatureBModule } from '../feature-b/feature-b.module';
Я был в состоянии получить приложение, работающее на удаление FeatureBModule. Тогда FeatureAModule правильно, так как он должен затем delcare FeatureBComponent.
Тогда FeatureAModule выглядит так:
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 {}
Я обновил plunker здесь: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview
Я только что пережил то же, и проблема была в том, что у меня был неправильный чехол ('и#39; против 'Это') для компонента.
На мой родительский компонент'шаблон ы, у меня было:
<mychild-component></mychild-component>
Вместо
<myChild-component></myChild-component>