-1

Estou fazendo uma aplicação usando angular com angular/cli, porém me encontro em um problema, terminei a minha tela home em app.component e quero redirecionar para a tela de login.

Porém me encontro onde o router-outlet abre o arquivo dentro do componente app, queria saber uma forma de abrir outra página html, mesmo que fosse outro módulo.

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>

1 Resposta 1

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)
    }

}]

Então, você pode usar o redirecTo para redirecionar em qualquer rota que você deseja e não o component referenciando no path pai, você pode chamar os seus filhos por qualquer rota ou ate mesmo modulos. Mas você pode usar também, apenas um path simples como abaixo, pra redirecionar para outra routa, mantendo a implementação.

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

E isso é um exemplo de rota em um app-routing ou module-routing pai de componentes, recomendo usar lazy loading em seus modules.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .