корпус с роутером-розеткой в ​​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>

Моя проблема возникает здесь, когда я хочу получить доступ к маршрутизаторуссылка /users, навигация или ul, где была ссылка на маршрутизатор, не загружалась, это переводит меня практически на другую страницу, помогите мне, пожалуйста

введите описание изображения здесь

Answer 1

Маршрутизатор-розетка работает только для дочерних маршрутов. У вас должно быть что-то вроде:

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

И роутер-выход должен находиться в родительском Maincomponent html файле