我不明白之间的区别router-outlet and module's exports array编译策略。
-
router-outlet将自动生成组件组件工厂解析器 https://github.com/angular/angular/blob/0cb4f12a7a57087ec4e8329a04d5dfc430764b45/packages/router/src/directives/router_outlet.ts#L124
- 如果你不使用
router-outlet访问其他模块的组件，它将抛出错误模板解析器 https://github.com/angular/angular/blob/e0ed59e55f8740303fc93784548d81c2de210e7e/packages/compiler/src/template_parser/template_parser.ts#L672
为什么我们需要将它添加到exports数组中，Angular无法自动生成模块中定义的组件，例如router-outlet.
我知道如果我想使用其他模块的组件，需要添加到导出中。
活生生的例子 https://stackblitz.com/edit/angular-98xaxk?file=src%2Fapp%2Fm1%2Fm1.module.ts
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)，不需要导出，就可以工作。
带路由的实例 https://stackblitz.com/edit/angular-rbgswr
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>
谢谢大家的回答，我的理解总结如下：
通过模块的导出数组加载组件
通过路由器加载组件
正如中所解释的Angular NgModule 常见问题解答 https://angular.io/guide/ngmodule-faq#what-should-i-export:
我应该出口什么？
导出组件所在的可声明类
其他 NgModule 可以在其模板中引用。这些都是
你的公开课。如果您不导出可声明的类，它会保留
私有，仅对此 NgModule 中声明的其他组件可见。
...
我不应该出口什么？
请勿导出以下内容：
仅由路由器或引导程序动态加载的组件。
这样的入口组件永远不能在另一个组件的
模板。虽然出口它们没有坏处，但也没有
益处。
...
另请注意，路由器组件是自动添加 https://angular.io/guide/entry-components#a-routed-entry-component to the entryComponents list.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
