angular - 为什么使用router-outlet访问其他模块的组件不需要添加导出

Question

我不明白 router-outlet 和 module's exports array 编译策略的区别。

• router-outlet 将通过 ComponentFactoryResolver 自动生成组件
• 如果您不使用router-outlet 访问其他模块的组件，它会从template parser 中抛出错误。

为什么我们需要将它添加到导出数组中，Angular 不能自动生成模块中定义的组件，如 router-outlet。

---

我知道如果我想使用其他模块的组件，它需要添加到导出。

live example

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>

---

如果我通过路由访问组件(http://example.domain.com/comp1)，它不需要导出，它可以工作。

live example with routing

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>

---

谢谢大家的回答，是我理解的总结:

通过模块的导出数组加载组件

通过路由器加载组件

Answer 1

如 Angular NgModule FAQs 中所述:

What should I export?

Export declarable classes that components in other NgModules are able to reference in their templates. These are your public classes. If you don't export a declarable class, it stays private, visible only to other components declared in this NgModule.

...

What should I not export?

Don't export the following:

Components that are only loaded dynamically by the router or by bootstrapping. Such entry components can never be selected in another component's template. While there's no harm in exporting them, there's also no benefit.

...

另请注意，路由器组件是 automatically added到 entryComponents 列表。