Угловой 2 Используйте компонент из другого модуля

У меня есть приложение Angular 2 (версия 2.0.0 – final), созданное с угловым кли.

Когда я создаю компонент и добавляю его в AppModule объявлений AppModule , все в порядке, он работает.

Я решил разделить компоненты, поэтому создал TaskModule и компонент TaskCard . Теперь я хочу использовать TaskCard в одном из компонентов AppModule (компонент Board ).

AppModule:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { BoardComponent } from './board/board.component'; import { LoginComponent } from './login/login.component'; import { MdButtonModule } from '@angular2-material/button'; import { MdInputModule } from '@angular2-material/input'; import { MdToolbarModule } from '@angular2-material/toolbar'; import { routing, appRoutingProviders} from './app.routing'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { UserService } from './services/user/user.service'; import { TaskModule } from './task/task.module'; @NgModule({ declarations: [ AppComponent, BoardComponent,// I want to use TaskCard in this component LoginComponent, PageNotFoundComponent ], imports: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, MdInputModule, MdToolbarModule, routing, TaskModule // TaskCard is in this module ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { } 

TaskModule:

 import { NgModule } from '@angular/core'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

Весь проект доступен на https://github.com/evgdim/angular2 (папка kanban-board)

Что мне не хватает? Что мне нужно сделать, чтобы использовать TaskCardComponent в BoardComponent ?

Основное правило здесь состоит в том, что:

Селекторы, которые применяются при компиляции шаблона компонента, определяются модулем, который объявляет этот компонент, и транзитивным закрытием экспорта импорта этого модуля.

Итак, попробуйте экспортировать его:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

Что мне следует экспортировать?

Экспортировать декларируемые classы, которые компоненты в других модулях должны иметь возможность ссылаться в своих шаблонах. Это ваши общедоступные classы. Если вы не экспортируете class, он остается закрытым, видимым только для другого компонента, объявленного в этом модуле.

В тот момент, когда вы создаете новый модуль, ленивый или нет, какой-либо новый модуль, и вы заявляете что-либо в нем, этот новый модуль имеет чистое состояние (как сказал Уорд Белл в https://devchat.tv/adv-in-angular/119 -aia-avoiding-common-pitfalls-in-angular2 )

Угловой создает транзитивный модуль для каждого из @NgModule s.

Этот модуль собирает директивы, которые либо импортируются из другого модуля (если транзитивный модуль импортированного модуля имеет экспортированные директивы), либо объявлены в текущем модуле .

Когда шаблон угловых компиляций принадлежит модулю X он использует те директивы, которые были собраны в X.transitiveModule.directives .

 compiledTemplate = new CompiledTemplate( false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives); 

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

введите описание изображения здесь

Таким образом, согласно рисунку выше

  • YComponent не может использовать ZComponent в своем шаблоне, потому что массив directives Transitive module Y не содержит ZComponent потому что YModule не импортировал ZModule , транзитивный модуль которого содержит ZComponent в массиве ZComponent .

  • В шаблоне XComponent мы можем использовать ZComponent потому что Transitive module X имеет массив директив, содержащий ZComponent потому что XModule импорта YModule ( YModule ), который экспортирует модуль ( ZModule ), который экспортирует директиву ZComponent

  • Внутри шаблона AppComponent мы не можем использовать XComponent потому что AppModule импортирует XModule но XModule не экспортирует XComponent .

Смотрите также

  • почему ленивый загруженный модуль должен импортировать commonModule? Угловой 2

  • Часто задаваемые вопросы по угловому модулю

  • В чем разница между декларациями, поставщиками и импортом в NgModule

Вы должны export его из своего NgModule :

 @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

Обратите внимание, что для создания так называемого «функционального модуля» вам необходимо импортировать CommonModule внутри него. Таким образом, ваш код инициализации модуля будет выглядеть так:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], declarations: [ TaskCardComponent ], exports: [ TaskCardComponent ] }) export class TaskModule { } 

Более подробная информация доступна здесь: https://angular.io/guide/ngmodule#create-the-feature-module

Независимо от того, что вы хотите использовать из другого модуля, просто поместите его в массив экспорта . Как это-

  @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule] }) 

РЕШЕННО КАК ИСПОЛЬЗОВАТЬ КОМПОНЕНТ, ЗАКЛЮЧЕННЫЙ В МОДУЛЕ В ДРУГОМ МОДУЛЕ.

Основано на объяснении Ройи Намира (Большое вам спасибо). Существует недостающая часть для повторного использования компонента, объявленного в модуле в любом другом модуле, когда используется ленивая загрузка.

1st: экспортируйте компонент в модуль, который содержит его:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

2nd: В модуле, где вы хотите использовать TaskCardComponent:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], providers: [], exports:[ MdCardModule ] <== this line }) export class TaskModule{} 

Таким образом, второй модуль импортирует первый модуль, который импортирует и экспортирует компонент.

Когда мы импортируем модуль во второй модуль, нам нужно его снова экспортировать. Теперь мы можем использовать первый компонент во втором модуле.

  • Как получить доступ / обновить $ rootScope извне Угловой
  • использование внешних JS-библиотек в моем проекте с угловым 2
  • Angular2 SEO - Как сделать угловое приложение с возможностью сканирования 2
  • Когда я обновляю свой сайт, я получаю 404. Это с Angular2 и firebase
  • ctorParameters.map не является функцией в угловом2-mdl
  • Маршрутизатор Angular2, получить данные маршрута с URL-адреса, отобразить панировочные сухари
  • Angular2 Tutorial (Tour of Heroes): Не удается найти модуль 'angular2-in-memory-web-api'
  • Угловая 4: Как включить Bootstrap?
  • Поля ввода маски в формах Angular2
  • Как скрыть элемент при прокрутке страницы?
  • Динамически загружать HTML-шаблон в angular2
  • Interesting Posts
    Давайте будем гением компьютера.