为什么我的路线无法载送合适的孩子？

Question

我目前正在研究Angular（CLI v7.1.0），我对路由/模块有些困惑。我正在构建一个测试应用程序，希望在不同模块中使用公共组件和管理组件。这是我的应用程序的样子：

（所有URL仅用于说明目的）

访问http://mywebsite.com的任何人都应该可以看到public模块，应该通过http://mywebsite.com/admin来访问admin模块。每个模块都有一个名为 WrapperComponent 的组件（我需要包装诸如标题，导航栏等共享组件），并且它将在管理模块中的所有页面之间导航，从而使{{1} }包含在HTML文件中。

app.module.ts

router-outlet

app-routing.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from './modules/admin/admin.module';
import { PublicModule } from './modules/public/public.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AdminModule,
    PublicModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

public.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'public',
    loadChildren: './modules/public/public.module#PublicModule'
  },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

public-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicRoutingModule } from './public-routing.module';
import { WrapperComponent } from './wrapper/wrapper.component';
import { HomeComponent } from './pages/home/home.component';

@NgModule({
  declarations: [HomeComponent, WrapperComponent],
  imports: [CommonModule, PublicRoutingModule]
})
export class PublicModule { }

  

admin.module.ts 和 admin-routing.module.ts 看起来与公共模块几乎相同。我不会在此处添加它以不扩展问题，但可以在GitHub上找到它。

问题

我尝试在 app-routing.module.ts 中制作import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { WrapperComponent } from './wrapper/wrapper.component'; import { HomeComponent } from './pages/home/home.component'; const routes: Routes = [ { path: '', component: WrapperComponent } ]; @NgModule({ declarations: [], imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class PublicRoutingModule { }，但是它没有重定向到公共模块。当我从阵列中删除此路由时，两个包装器（公共和管理员）均已加载。我需要按照上面的解释进行操作，但是我有点迷路了。我在这里还有Angular docs for lazy loading + Angular docs for Routing & Navigation等其他问题。

预先感谢〜

Answer 1

基本上，问题在于您需要使用 FirebaseDatabase database = FirebaseDatabase.getInstance(); DatabaseReference ref = database.getReference("childInfo").child(userid); ref.setValue(userDataUWant); （这是更简单的方法，但是如果您不想使用lazy loading，它也是possible），那就是{{1 lazy loading中的}}属性。

因此loadChildren应该看起来像这样（检查正确的路径）。

routing module

还要从app-routing.module.ts的{​​{1}}中删除import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'public', pathMatch: 'full' }, { path: 'public', loadChildren: './modules/public/public.module#PublicModule' }, { path: 'admin', loadChildren: './modules/admin/admin.module#AdminModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }和PublicModule

There is simple understandable example of lazy loading modules.