使用模块中的另一个模块:在路由中导入与使用loadChildren

时间:2017-10-08 17:05:22

标签: angular angular-router angular-module

在我对Angular的探索中,我发现了两种可能的方法来在另一个模块中使用一个模块。

(使用angular-express-starter project作为参考)

  • 方法1 : 在imports数组中声明它。 For example

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        SharedModule,
        FormsModule
      ]
    })
    
  • 方法2 : 在路由中使用loadChildrenFor example

    export const routes: Route[] = [
      { path: '', pathMatch: 'full', redirectTo: 'weather'},
      { loadChildren: 'app/dashboard/dashboard.module#DashboardModule', path: 'dashboard' },
      { loadChildren: 'app/profile/profile.module#ProfileModule', path: 'profile' },
      { loadChildren: 'app/weather/weather.module#WeatherModule', path: 'weather' }
    ];
    

这两种方法之间有什么实际差异?

2 个答案:

答案 0 :(得分:1)

  

这两种方法之间有什么实际差异?

最大的区别是通过loadChildren加载的模块将拥有自己的注入器,而来自导入模块的提供程序将合并到一个根注入器中。这意味着您无法将延迟加载模块中的提供程序注入其他延迟加载的模块中。

其他差异:

  • 如果您不使用路由,则无法使用loadChildren
  • 只有当相应的路线导航到时,才会加载
  • 通过loadChildren加载的模块

欲了解更多信息,请阅读

答案 1 :(得分:0)

当您使用public class Student { private String sch_id; private String name; private String stud_nat_id; private String passw; private String email; private String guardian; private String classname; public Student(String sch_id, String name, String stud_nat_id, String passw, String email, String guardian, String classname) { this.sch_id = sch_id; this.name = name; this.stud_nat_id = stud_nat_id; this.passw = passw; this.email = email; this.guardian = guardian; this.classname = classname; } public String getSch_id() { return sch_id; } public void setSch_id(String sch_id) { this.sch_id = sch_id; } public String getSName() { return name; } public void setSName(String name) { this.name = name; } public String getStud_nat_id() { return stud_nat_id; } public void setStud_nat_id(String stud_nat_id) { this.stud_nat_id = stud_nat_id; } public String getPassw() { return passw; } public void setPassw(String passw) { this.passw = passw; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getGuardian() { return guardian; } public void setGuardian(String guardian) { this.guardian = guardian; } public String getClassname() { return classname; } public void setClassname(String classname) { this.classname = classname; } } 时,它被称为“延迟加载”,总的来说它可以帮助我们缩短启动时间。只有在用户导航到他们的路线时才会加载延迟加载的模块。

有关“延迟加载”的更多信息:https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html