具有延迟加载的 NGRX 路由

Question

我目前正在使用 angular ngrx 做一个测试项目并尝试使用延迟加载。但是，我的提要切换器似乎无法正常工作，我不太明白为什么： https://github.com/MiguelSchool/AngularNGRX

这是我的切换组件，它为我提供了不同路线的链接

export class FeedTogglerComponent implements OnInit {

  @Input('tagName')tagNameProps: string | null | undefined;
  isLoggedIn$: Observable<boolean> | undefined;
  constructor(private store: Store) { }

  ngOnInit(): void {
   this.initializeValues();
  }

  private initializeValues(): void {
    this.isLoggedIn$ = this.store.pipe(select(isLoggedInSelector));
  }
}

<div class="feed-toggle">
  <ul class="nav nav-pills outline-active">
    <li class="nav-item" *ngIf="(isLoggedIn$|async)">
      <a
        class="nav-link"
        [routerLink]="['/home/feed']"
        routerLinkActive="active">
        Your Feed
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        [routerLink]="['/home']"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact:true}">
        Global Feed
      </a>
    </li>
    <li class="nav-item" *ngIf="tagNameProps">
      <a
        class="nav-link"
        [routerLink]="['/tags',tagNameProps]"
        routerLinkActive="active">
        #{{tagNameProps}}
      </a>
    </li>
  </ul>
</div>

我的路线在应用程序模块中以加载不同的路线

const routes:Routes = [
  {
    path:'',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('src/app/globalFeed/GlobalFeed.module')
      .then(module => module.GlobalFeedModule)
  },
  {
    path: 'home/feed',
    loadChildren: () => import('src/app/your-feed/your-feed.module')
      .then(module => module.YourFeedModule)
  },
  {
    path:'login',
    loadChildren: () => import('src/app/auth/auth.module')
      .then(module => module.AuthModule)
  },
  {
    path:'register',
    loadChildren: () => import('src/app/auth/auth.module')
      .then(module => module.AuthModule)
  },
  {
    path: 'tags/:slug',
    loadChildren: () => import('src/app/tag-feed/tag-feed.module')
      .then(module => module.TagFeedModule)
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];
export const appRouter = RouterModule.forRoot(routes);

以下是不同模块中的路线：

//your feed module

const routes: Routes = [
  {
    path: '',
    component: YourFeedComponent
  }
];
export const router = RouterModule.forChild(routes);

//tagfeed module
const routes: Routes = [

  {
    path: 'tags/:slug',
    component: TagFeedComponent
  }
];
export const router = RouterModule.forChild(routes);

Answer 1

你的路由器文件应该是这样的：

const routes: Routes = [
  { path: "", component: YourFeedComponent}
];

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

我检查了你的 github 仓库，你需要将每个路由文件更改为路由模块，甚至是 appRouter，然后导入 RoutingModule class 而不是你正在创建的导出变量

具有延迟加载的 NGRX 路由

NGRX routing with Lazy Loading

routes

ngrx

angular