Question

我是Angular的新手。我正在尝试通过多个组件实现延迟加载。它的惰性加载宿主组件正常，但是无法加载其他组件。

它抛出以下错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ admin”

app.routing.ts

{
   path: '',
   component: SiteLayoutComponent,
   children: 
   [
      {
        path: 'home',
        loadChildren: './lazymodules/lazy.module#LazyModule',
      },
   ]},

lazy-routing.module.ts

const routes: Routes = [
  {
    path: '', component: HomeComponent,
  }
   ,
   {
     path: 'admin', component: AdminComponent,
   },
  { path: 'settings', component: SettingsComponent },
  { path: 'about', component: AboutComponent }];

我在stackblitz上创建了类似的示例应用程序。有人请在这里帮助。

预先感谢

Answer 1

用-

替换导航代码（在网站标题文件中）

this.router.navigateByUrl('/home/admin');

或

this.router.navigate(['home/admin']);

Answer 2

检查我在site-header.component.ts

中所做的以下更改

NavigateToRoute(pageURL: string) {
    //alert(pageURL);
    if (pageURL == "home") {
      console.log(pageURL);
      this.router.navigate(['home']),
      this.MenuActive = "home";
    }
    else if (pageURL == "admin") {
      console.log(pageURL);
      this.router.navigate(['admin'], {relativeTo: this.route}); // <- this was missing
      this.MenuActive = "admin";
    }
    else if (pageURL == "settings") {
      console.log(pageURL);
      this.router.navigate(['settings'], {relativeTo: this.route});
      this.MenuActive = "settings";
    }
    else if (pageURL == "about") {
      console.log(pageURL);
      this.router.navigate(['about'], {relativeTo: this.route});
      this.MenuActive = "about";
    }
    else if (pageURL == "login") {
      console.log(pageURL);
      this.router.navigate(['login'], {relativeTo: this.route});
    }
  }

看看更新后的示例here

具有多个组件的Angular LazyLoading不起作用

2 个答案: