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

Question

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

router-outlet 将通过 ComponentFactoryResolver
如果你不使用router-outlet访问其他模块的组件，它会从template parser

为什么我们需要将它添加到exports数组中，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>

如果我通过路由访问组件(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 列表。

Answer 2

NgModule 和作用域/可见性 混淆始于组件和服务不具有相同的范围/可见性：

声明/组件在本地范围内（私有可见性），提供商/服务（通常）在全球范围内（public 可见性）。这意味着您声明的组件只能在当前模块中使用。如果你需要在外部使用它们，在其他模块中，你必须导出它们：

但是 router-outlet 在运行时间加载特定组件，所以我们不需要导出它们。（我是这么理解的，如果我错了请原谅我）

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

Why use router-outlet to access component of other module doesn't need add to export

angular-routing

angular-module

angular

angular-compiler