2016-12-22 1 views
22

Я абсолютно не знаком с Angular2, и было очень сложно понять, что происходит с @NgModuleИмпорт и экспорт в Angular2.angular2 - Как работают «импорт» и «экспорт» в модули Angular2?

Возьмем следующий код ПРИМЕР-:

@NgModule({ 
    imports: [ 
    RouterModule.forChild(heroesRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 

В разделе импорта что я импортирующей?Модуль маршрутизатора или функция forChild() или модуль, возвращаемый функцией forChild()? Какая из них?

Кроме того, когда я снова экспортировать RouterModule, то documentation говорит: включено следующее:

Наш последний шаг должен повторно экспортировать RouterModule. При повторном экспорте модуля RouterModule наш функциональный модуль будет снабжен директивами Router при использовании нашего модуля маршрутизации.

Так ли это, что любой модуль импортирует выше NgModule, будет иметь доступ ко всему коду в RouterModule?

Это похоже на то, что я пишу пользовательский заголовочный файл в C, который включает в себя math.h, если теперь я использую этот файл заголовка, мне больше не нужно включать math.h в мою программу отдельно. Является ли моя аналогия правильной?

Может кто-то объяснить основные понятия здесь, так что я не становлюсь тупым каждый раз, когда вижу новый код.

ответ

4

Если вы используете <router-outlet> компонент или routerLink или routerLinkActive директивы, вам нужно добавить к RouterModuleimports: [] каждого модуля, в котором вы хотите использовать любой из них.

Это то же самое для любой директивы, компонента или трубы. Угловые только создают их в модуле, если они известны импортом.

Если вы добавите модуль в imports: [], все директивы, компоненты и трубы, перечисленные в разделе экспорта, станут доступны для модуля импорта.

Модуль также может реэкспортировать другие модули, что позволяет экспортировать директивы, компоненты и трубы этих модулей в модуль импорта.

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

28

модуль в Angular2 очень похож на модули Angular1, которые в основном представляет собой пакет, содержащий все биты и куски, что имеет смысл быть отправлены вместе.

Например, если у вас есть LoginComponent, который по некоторым причинам подключен к Сервису, который является LoginService, который выполняет некоторый HTTP-запрос, чтобы получить некоторую пользовательскую информацию, вы можете создать LoginModule, который отправляет LoginComponent и LoginService вместе, LoginModule.

LoginService также может использовать некоторые интерфейсы, например UserInterface, что, опять же, имеет смысл отправляться пользователю LoginModule.

Итак, если я ваш клиент, и я собираюсь использовать ваши общие функции входа в систему, мне будет намного проще импортировать свой LoginModule и все ваши лакомства, доступные для моего AppComponent!

Итак, ваш класс LoginModule (который не что иное, как простой файл javascript и функция) должен экспортировать LoginModule, который будет использоваться мной :).

LoginModule будет выглядеть следующим образом:

@NgModule({ 
     declaration:[LoginComponent , LogoutComponent], 
     exports: [ 
     LoginComponent , LogoutComponent 
     ], 
     providers:[LoginService] 
    }) 
    export class LoginModule{ 

    } 

Так что в моем AppModule, я бы импортировать LoginModule.

@NgModule({ 
    imports: [ 
    LoginModule, 
    RouterModule.forChild(heroesRoutes) // another imported module that I need beside the Login 
    ] 
}) 

НО:

Если я знаю, что ваш код, и я не хочу, любой из ваших дополнительных функций и компонентов, а также классов и вещей, и мне просто нужно использовать LoginComponent, я бы предпочел, чтобы объявить только что я использую LoginComponent, и я не хочу импортировать массивный LoginModule!

@NgModule({ 
    declaration:[LoginComponent], 
    imports: [ 
    RouterModule.forChild(heroesRoutes) 
    ] 
}) 

Это только и только работа, если LoginComponent не имеет прямой зависимости от LoginService, другие мудрые Угловая жаловались бы и сказать:

**No Provider for LoginService** 

Что в этом случае, если вы жесткий человек, и вы все еще не убеждены в том, чтобы использовать LoginModule, вы можете помочь Угловое и обеспечить LoginService как:

@NgModule({ 
    declaration:[LoginComponent],// declaring it 
    providers:[LoginService],// providing it 
    imports: [ 
    RouterModule.forChild(heroesRoutes) 
    ] 
}); 

Итак, это может продолжаться, и вы могли бы найти его EAS ier просто импортировать весь LoginModule и позволить самому модулю выполнять всю работу.!

Это все с LoginModule.


Теперь, чтобы ответить на ваш вопрос относительно forChild.

LoginModule может захотеть сделать что-то лишнее, если предоставить вам свои классы, которые не всегда нужны, в этом случае вы, возможно, улучшили бы LoginModule и добавили к нему немного сахара.

@NgModule({ 
    declaration:[LoginComponent , LogoutComponent], 
    exports: [LoginComponent , LogoutComponent], 
    providers:[LoginService] 
}) 
export class LoginModule{ 
    public static logAndLoadModule(message){ 
    console.log('I first log and then give you my module'); 
    return { 
     ngModule: LoginModule 
    } 
    } 
    public static alertAndLoadModule(message){ 
     alert('I first alert and then give you my module'); 
    return { 
     ngModule: LoginModule 
    } 
    } 
} 

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

@NgModule({ 
     imports: [ 
     LoginModule.logAndLoadModule(), 
     RouterModule.forChild(heroesRoutes) 
     ] 
    }) 

Не logAndLoadModule это похоже на forChild функции RouterModule?

Да, он по-прежнему дает вам LoginModule, но он также делает некоторые дополнительные вещи.

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

UPDATE:

экспорт класс LoginModule, значит, текущий файл (возможно login.module.ts или любой другой) экспортирует класс с именем LoginModule, которые могут быть импортированы из других файлов и не имеет ничего общего с Angular, это только машинопись, которая будет компилироваться в javascript.

Где, как

@NgModule({ 
     exports: [ 
     LoginModulesBrother 
     ] 
    }) 
    export class LoginModule{ 

    } 

Выше Angular2 конкретного языка и означает LoginModule также Экспорт LoginModulesBrother, так что кто-либо импортирует LoginModule, также имеют доступ к к LoginModulesBrother.

Итак, LoginModulesBrother, еще один модуль, который, вероятно, определяется где-то еще, как:

@NgModule({ 
     // some other magic here 
    }) 
    export class LoginModulesBrother{ 

    } 

Так в целом, импорт и экспорт класс, который мог бы быть то, что когда-нибудь (а модуль компонент а конвейеру простая функция или что-то еще) - это только машинопись, но экспортирующий массив и массив импорта - это только Угловой специфический язык и ничего не означает для машинописного текста.

+0

Хорошо несколько путаницы. Когда вы пишете 'export class LoginModule', почему вы снова включаетесь в экспорт' NgModule'? Во-вторых, такие функции, как 'logAndLoadModule', они просто определены вами или являются частью спецификации? –

+0

Хорошо, но добавив его в экспорт '@ NgModule', он сообщает Angular2, что класс экспортируется, правильно? Итак, теоретически я могу написать класс без ключевого слова 'export' и добавить его в массив export в ngModule? Это было бы справедливо? Я имею в виду, что я говорю Angular2, что класс экспортируется, но я не говорю машинописную. Будет ли это работать? –

+0

см. Мое обновление – Milad

0

Из RouterModule документов:

  • forRoot создает модуль, содержащие все директивы, заданные маршруты, а сам сервис маршрутизатора.
  • forChild создает модуль, который содержит все директивы и данные маршруты, но не включает службу маршрутизатора.

используется forRoot настроить маршрутизацию для корневого модуля и forChild для вас имеются модули.

Вам не нужно router service в функциональных модулей, поскольку требуется только один для вашего приложения, которые вы должны настроить в AppRoutingModule по соглашению (предполагается, что ваш корневой модуль называется AppModule).

Использование фрагмента кода в качестве примера:

@NgModule({ 
     imports: [ 
     RouterModule.forChild(heroesRoutes) 
     ], 
     exports: [ 
     RouterModule 
     ] 
    }) 
    export class AppRoutingModule {} 

RouterModule имеет некоторые заявления, как routerLink или routerLinkActive, которые могут быть использованы компоненты в AppModule.

Для этих деклараций должны быть доступны в AppModule, вы либо импортировать RouterModule непосредственно в AppModule или сделать его доступным через AppRoutingModule путем экспорта.

0

Отличное объяснение и пример маршрутизатора.forChild (ROUTES) (и маршрутизатора в целом) можно найти on youtube.

Это беседа Виктора Савкина, одного из главных участников Углового Маршрутизатора.

После прочтения многих руководств и ответов SO о маршрутизаторе его разговор помог мне обернуть все это и посмотреть, как это работает на живом примере.

Примечание: Ссылка начинается в 6:22, где Виктор объясняет ленивую загрузку. Не стесняйтесь начинать с начала видео для получения более подробной информации о том, как работает маршрутизатор.