首页 > 解决方案 > 在 Angular 中,我可以为两个不同的路径使用相同的模块吗?

问题描述

我在 Angular 8 中实现延迟加载,但被卡在了中间。对于登录和注销,我使用了如下相同的模块。

    const myroutes : Routes = [        
        {path : 'login',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},       
        {path : 'logout',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},
        {path : 'contact',loadChildren:()=>import('./contact/contact.module').then(m=>m.ContactModule)},
        {path : 'home',loadChildren : ()=> import('./home/home.module').then(m=>m.HomeModule)},
     ]

并在 login.module.ts 中使用

const myroutes : Routes = [
  {path : '',component : LoginComponent},
  {path : 'logout',component : LogoutComponent}
]

包含所有链接的模板如下

<nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                    <a class="nav-link" routerLink="home">Home</a>
            </li> 
            <li class="nav-item">
                    <a class="nav-link" routerLink="contact">Contact</a>
            </li>
            <li class="nav-item">
                    <a class="nav-link" routerLink="login">Login</a>
            </li>
            <li class="nav-item">
                        <a class="nav-link" routerLink="logout">logout</a>
            </li>
        </ul>
      </nav>
<router-outlet></router-outlet>

但是每当我点击注销链接时,LogoutComponent.ts 总是不会进入登录组件。

可能会发生什么?

标签: angularangular-routing

解决方案


注销组件的正确路径是登录和注销的串联,因此:

/login/logout 

所以你的 routerLink 变成了这样:

routerLink="login/logout"

推荐阅读