Зачем использовать router-outlet для доступа к компоненту другого модуля, не нужно добавлять в экспорт

Я не понимаю разницы между стратегиями компиляции router-outlet и module's exports array.

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

Почему нам нужно добавить его в массив экспорта, Angular не может автоматически генерировать компонент, определенный в модуле, например router-outlet.


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

живой пример

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
// import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    // AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }


----------------------

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    Comp1Component,
    Comp2Component
  ],
  exports: [
    Comp1Component
  ]
})
export class M1Module {}
<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>


<app-comp1></app-comp1>


если я обращаюсь к компоненту через routing(http://example.domain.com/comp1), его не нужно экспортировать, он может работать.

живой пример с маршрутизацией

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

/*****************************************************/

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Comp1Component }   from './m1/comp1/comp1.component';
import { Comp2Component }   from './m1/comp2/comp2.component';


const routes: Routes = [
  { path: 'comp1', component: Comp1Component },
  { path: 'comp2', component: Comp2Component }
];

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


/*****************************************************/

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [Comp1Component, Comp2Component],
})
export class M1Module { }
<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!-- it's need to use export -->
<!-- <app-comp1></app-comp1> -->

<!-- it doesn't need to use export -->
<router-outlet></router-outlet>


спасибо, все ответили, это резюме, которое я понимаю:

загрузить компонент по массиву экспорта модуля

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

загрузить компонент по маршрутизатору

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


person Chunbin Li    schedule 17.06.2018    source источник


Ответы (2)


Как объясняется в часто задаваемых вопросах по Angular NgModule:

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

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

...

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

Не экспортируйте следующее:

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

...

Также обратите внимание, что компоненты маршрутизатора автоматически добавляются в список entryComponents.

person ConnorsFan    schedule 23.06.2018
comment
спасибо, я добавил две диаграммы, чтобы описать мое понимание, скажите мне, если я ошибаюсь - person Chunbin Li; 29.06.2018

NgModule и области действия/видимость Путаница начинается с компонентов и служб, не имеющих одинаковой области действия/видимости:

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

Но router-outlet загружает конкретный компонент во время выполнения, поэтому нам не нужно их экспортировать. (Вот как я понял, простите меня, если я ошибаюсь)

person Nambi N Rajan    schedule 28.06.2018
comment
спасибо, я добавил две диаграммы, чтобы описать мое понимание, скажите мне, если я ошибаюсь - person Chunbin Li; 29.06.2018