0

Estou tentando fazer que ao clicar em um botão, o usuário seja redirecionado para outro componente, porém, eles estão se misturando. Meu componente principal é o Home, e estou tentando redirecionar para o componente Game. Vejam:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { GameComponent } from './game/game.component';

@NgModule({
  declarations: [
    HomeComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppRoutingModule],
  bootstrap: [HomeComponent]
})
export class AppModule { }

app.routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { GameComponent } from './game/game.component';


const routes: Routes = [
  { path: 'game', component: GameComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

home.component.ts

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  redirectGame(){
    this.router.navigate(['/game'])
  }

}

home.component.html

    <div class="container">
    <div class="col-md-12 text-center">
        <img class="logo-home img-fluid" alt="Star Wars the Game" title="Star Wars the Game" src="../../assets/img/logo_star_wars.jpg" />
    </div>
    <div class="col-md-12 text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae dolor dui. Maecenas justo libero, sodales eu rhoncus eget, porttitor non nisl. In at nunc id dolor porta viverra sit amet at lorem. Nullam sit amet facilisis quam, non rutrum
            massa. Mauris iaculis arcu auctor, malesuada eros ut, scelerisque urna. </p>
        <h3>MAY THE FORCE!</h3>
    </div>
    <div class="col-md-12 text-center btn-iniciar">
        <button type="button" (click)="redirectGame()" class="btn btn-lg btn-dark">PLAY THE GAME!</button>
    </div>
</div>

<router-outlet></router-outlet> 

Ele chama o Game component quando clico no botão, porém, eles se misturam.
Eu precisava que só fosse me mostrado o game.component

Alguma idéia?

1 Resposta 1

1

O problema e que vc so tem uma rota e precisa de duas.

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { GameComponent } from './game/game.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppRoutingModule],
  bootstrap: [AppComponent]
})

app.routing.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { GameComponent } from './game/game.component';


const routes: Routes = [
  { path: '', component: HomeComponent}
  { path: 'game', component: GameComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

app.component

<router-outlet></router-outlet> //remover este router outlet do home component

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 .