Angular 5 does not redirect to another component

Asked

Viewed 632 times

0

I am trying to get the user to be redirected to another component by clicking on a button, but they are merging. My main component is Home, and I’m trying to redirect to the Game component. Look:

app.modulets.

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.componentts.

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>

He calls the Game component when I click the button, however, they mix.
I needed just to be shown the game.Component

Any idea?

angular

1 answer

1

The problem is that you only have one route and need two.

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.

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

Browser other questions tagged angular

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