Angular中带有路由器插座的案例

Question

这是我的情况，我在 app-routing.module.ts 中配置了一个主登录名

{
  path:'',
  redirectTo:'/login',
  pathMatch: 'full'
},
{
  path:'users',
  component:UsuariosComponent
}

我的登录

<div class="container p-5">
  <div class="row">
    <div class="col-md-4 mx-auto">
      <div class="card">
        <div class="card-header">
          Acceso al Sistema
        </div>
        <div class="card-body">
          <form  (submit)="login()" >
            <div class="form-group">
              <input type="text"  [(ngModel)]="user.email" name="email" class="form-control" placeholder="Email" autofocus>
            </div>
            <div class="form-group">
              <input type="password"  [(ngModel)]="user.contrasenia" name="password" class="form-control" placeholder="Contraseña" >
            </div>
            <button type="submit" class="btn btn-primary btn-block">
              Ingresar
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>
</div>

然后登录主组件时使用route.navigate到/main

1. 我的 app.component 是这样的

   < router-outlet></router-outlet>
   

2.我的main是这样的main.component.html

<ul class="navbar-nav ml-auto"><!--mr-auto-->
   <li class="nav-item">
     <a class="nav-link" routerLink="/users" routerLinkActive="active">
      <i class="material-icons">person</i>
    </a>
   </li>
   <li class="nav-item">
    <a class="nav-link" style="cursor: pointer;" (click)="salir()" routerLinkActive="active">
      <i class="material-icons">power_settings_new</i>
    </a>
  </li>
 </ul>
 
  

<router-outlet></router-outlet>

当我想访问 routerlink /users 时，我的问题就来了，routerlink 没有加载的导航或 ul，它实际上将我带到另一个页面，请帮助我

Answer 1

Router-outlet 仅适用于子路由。你需要有类似的东西：

{
  path:'',
  component: Maincomponent,
  children:[
    {
      path: 'users',
      component: Usercomponent
    }
  ]
}

并且router-outlet必须位于父Maincomponent html文件中