为什么使用router-outlet访问其他模块的组件不需要add to export [英] Why use router-outlet to access component of other module doesn't need add to export

问题描述

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

• router-outlet 将通过

  为什么我们需要将它添加到exports数组中，Angular不能像router-outlet那样自动生成模块中定义的组件.

  <小时>

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

  通过路由器加载组件

  解决方案

  如 Angular NgModule 常见问题:

  <块引用>

  我应该导出什么?

  导出组件中的可声明类其他 NgModules 能够在它们的模板中引用.这些是你的公开课.如果您不导出可声明的类，它将保持不变私有，仅对在此 NgModule 中声明的其他组件可见.

  ...

  <块引用>

  我不应该导出什么?

  不要导出以下内容:

  仅由路由器或引导程序动态加载的组件.这样的入口组件永远不能在另一个组件的模板.虽然出口它们没有坏处，但也没有受益.

  ...

  另请注意，路由器组件是自动添加到entryComponents 列表.

  I don't understand the difference between router-outlet and module's exports array compilation strategies.

  • router-outlet will auto generate component by ComponentFactoryResolver
  • if you are not use router-outlet to access component of other module, it will throw error from template parser

  Why do we need to added it to exports array, Angular can't auto generate the component that defined in the module like router-outlet.

  ---

  I know if I want to use component of other modules, it's needed add to exports.

  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>

  ---

  if I access the component through routing(http://example.domain.com/comp1), it doesn't need to exports, it's can work.

  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>

  ---

  thanks, everyone's answer, it's summary that I understand :

  load component by module's exports array

  load component by router

  解决方案

  As explained in 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.

  ...

  Also note that router components are automatically added to the entryComponents list.

  这篇关于为什么使用router-outlet访问其他模块的组件不需要add to export的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！