當我們使用某個總結的知識點解決了某個問題的時候，我們稱其為**證真**，即使用現實的問題來驗證了自己理論的正確性，在**證真**的過程中我們學習到了新的知識；當我們用歷史總結的某個知識點來再次嘗試解決類似問題的時候發生了預期外的錯誤，我們稱其為**證偽**，即我們使用現實的問題證明某個已形成的理論是錯誤的，此時則是我們知識的提升。所以**證偽比證真更重要**。 在3.3.6小節中我們初次接觸了`exports`關鍵字，并有如下說明： ` ② 導出配置過的RouterModule，其它模塊若引用該模塊(AppRoutingModule)，則將自動引用RouterModule。`  但通過對上個小節的學習我們發現以上說法是錯誤的。因為其它模塊自動導入RouterModule的原因是由于其聲明在了`imports`，而非`exports`中。也就是說：即使我們不在app-routing.module.ts中進行`exports`聲明，app模塊仍然是相當于import了RouterModule的。按這個理論，我們嘗試刪除app-routing.module.ts中`exports`聲明的RouterModule。 app-routing.module.ts ``` @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [] }) export class AppRoutingModule { } ``` #### 測試  測試得到如上錯誤說不認識`router-outlet`這個組件。由于剛剛刪除了`exports`中的RouterModule，所以我們能夠馬上就定位到是由于該操作造成的。當然也可以推測出`router-outlet`這個組件是屬于`RouterModule`的。那么按照前面**找誰幫忙前需要引入該服務所在的模塊**的理論，我們嘗試直接在App模塊中引入`RouterModule`試試看。 app.module.ts ``` imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, RouterModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 最終的確不報錯了。我們認為當前現象最少說明了以下以點： * [ ] **找誰幫忙前需要引入該服務所在的模塊**的理論是正確的。 * [ ] imports進行層級依賴的理論是不完全正確的。 * [ ] exports在層級依賴中起著一定的作用。 ## 官方文檔 到了這種時候，我們就可以開始嘗試使用終極的解決辦法**查閱官方文檔**了，每當這時候，我們就開始恨自己為什么當初不好好的學習英文的閱讀理解部分了。 官方文檔對exports這部分進行如下解釋： ``` 此 NgModule 中聲明的一組組件、指令和管道可以在導入了本模塊的模塊下任何組件的模板中使用。 導出的這些可聲明對象就是該模塊的公共 API。 The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API. ``` 雖然angular有相當優秀的官方文檔，但有時候看英文的原文會更有韻味，更能讓我們理解其中的含意。 我們好像懂了： * [ ] 在exports中聲明組件A后，表示其它模塊在imports本模塊后，可以在自己的模塊中使用該組件A。 * [ ] 在exports中聲明模塊A后，表示其它模塊在imports本模塊后，可以在自己的模塊中使用該模塊A中所exports的組件。 * [ ] 在imports中聲明模塊A后，表示該模塊可以使用模塊A中所exports的內容（可能是本模塊組件、也可能是聲明的其它模塊中的所有exports內容）。 按上述理論重新繪制系統邏輯圖如下：  > 上述的理論也不見得就一定是正確的。但沒有任何關系，因為我們的當前理論已經可以證真當前遇到的所有問題了，而這在學習的過程中就足夠了。 最后，按上述的理論我們刪除掉klass/klass.module.ts中的exports部分。原因是Klass模塊未被任何模塊imports，當然也就不需要任何的exports了。 klass/klass.module.ts ``` /** * 班級模塊 */ @NgModule({ declarations: [IndexComponent, AddComponent, EditComponent], imports: [ CommonModule, FormsModule, ReactiveFormsModule, RouterModule.forChild(routes) ] }) export class KlassModule { } ``` 最后我們進行系統的測試，以保證當前的變更不對歷史的功能造成任何影響 。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.8](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.8) | - | | exports | [https://www.angular.cn/api/core/NgModule#exports](https://www.angular.cn/api/core/NgModule#exports) | 5 |