Angular2 - Как "импорт" и "экспорт" работают в модулях angular2?

Ответ 1

Модуль в 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, и я не знаю, t хотите импортировать ваш массивный LoginModule!

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

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

**No Provider for LoginService**

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

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

Итак, это может продолжаться, и вам может быть проще просто импортировать весь 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, но вы также можете использовать его как предупреждение, так и журнал.

ОБНОВЛЕНИЕ:

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

Где

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

  }

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

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

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

  }

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

Ответ 2

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

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

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

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

См. также

• https://angular.io/docs/ts/latest/guide/ngmodule.html
• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html