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?