Problems with angular routes

Asked

Viewed 327 times

0

I’m making an application using angular with/cli, but I find myself in a problem, I finished my home screen in app.Component and I want to redirect to the login screen.

But I find where the router-outlet opens the file inside the app component, I wanted to know a way to open another html page, even if it was another module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { CadastroComponent } from './cadastro/cadastro.component';


const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'cadastro', component: CadastroComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
<body>
       <router-outlet>
  <ul class="nav">
    <li class="nav-item">
        <a class="navbar-toggler my" href="#">MyFamily</a>
    </li>
    <li class="nav-item">
      <button class="nav-link btn " routerLink="/login">Entrar</button>
    </li>
  </ul>

  <div class="meio">
  <p>Planeje junto com sua família tudo que a vida pode te proporcionar de bom!</p>
<div class="input-group">
  <input  class="input" placeholder="E-mail">
   <div class="input-group-btn">
  <button class="nav-link btn2 " routerLink="/cadastro">Entre para o MyFamily</button>
   </div>
</div>
  <p style="text-align:center;">Deseja assinar? Informe seu email para criar sua conta.</p>
</div>

       </router-outlet>
       <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

angularjs angular angular-routes

1 answer

0

    const routes: Routes = [{
  path: '',
  component: LoginComponent,
  children: [
    {
      path: '',
      redirectTo: '/rotaQualquer',
      pathMatch: 'full'
    },
    {
      path: 'login',
      loadChildren: () =>
        import('../login/login.module').then(m => m.LoginModule)
    },
    {
      path: 'outra-routa-qualquer',
      loadChildren: () =>
        import(
          '../outro-component/outro-component.module'
        ).then(m => m.OutroComponentModule)
    }

}]

So, you can use redirectTo to redirect on any route you want and not the Component referencing in the parent path, you can call your children by any route or even modules. But you can also use, just a simple path as below, to redirect to another rout, keeping the implementation.

const routes: Routes = [
  {path: 'login', component: LoginComponent},
   {
      path: '',
      redirectTo: '/rotaQualquer',
      pathMatch: 'full'
    },
  {path: 'cadastro', component: CadastroComponent}
];

And this is an example of route in an app-routing or module-routing parent components, I recommend using Lazy loading in its modules.

Browser other questions tagged angularjs angular angular-routes

You are not signed in. Login or sign up in order to post.