Bouton de redirection vers une autre page dans Angular 5

mohamed ismail

Bonjour les gars Tout d'abord, j'apprends angulaire 5 pour la première fois. Ce que je veux, c'est rediriger d'une page à une autre à l'aide d'un bouton. Je ne sais pas comment le faire fonctionner. J'utilise angular 5. Voici mon code :

Accueil.composant.html

<div style="text-align:center">
 <button (click)="btnClick()">Add Employee</button>
</div>
<br>
<div style="text-align:center">
 <button (click)="btnClick()">Employee List</button>
</div>
<br>

Accueil.composant.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    constructor(private router: Router) {}

    ngOnInit() {
    }

    btnClick(){
        this.router.navigate(['/employees']);
    }
}

Je n'ai pas route.config mais ce que j'ai est app.module.ts si je fais quelque chose de mal s'il vous plaît dites-moi

app.module.ts :

...........
import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesComponent } from './employees/employees.component';
  @NgModule({
declarations: [
  AppComponent,
  EmployeesComponent,
  EmployeeComponent,
  EmployeeListComponent,
  AppHeaderComponent,
  AppFooterComponent,
  HomeComponent,

],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  ToastrModule.forRoot(),



],
heakinakai

Il semble que vous deviez d'abord configurer les routes de votre application afin que la sortie du routeur sache quel composant charger lorsque ['/employees'] est appelé

il y a une bonne explication sous : https://angular.io/tutorial/toh-pt5

Tout d'abord, vous devez configurer la route

import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesComponent } from './employees/employees.component';
    const routes: Routes = [
  { path: 'home', component: HomeComponent }
  { path: 'employees', component: EmployeesComponent }
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];
  @NgModule({
declarations: [
  AppComponent,
  EmployeesComponent,
  EmployeeComponent,
  EmployeeListComponent,
  AppHeaderComponent,
  AppFooterComponent,
  HomeComponent,

],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  ToastrModule.forRoot()
  RouterModule.forRoot(routes),



],

Ensuite, dans votre code HTML AppComponent, vous devez utiliser la sortie du routeur (en supposant que vous souhaitiez que vos employés s'affichent sur le composant de l'application)

<router-outlet></router-outlet>

Articles connexes

erreur de redirection vers une autre page en utilisant php

Pavan Kumar Dans mon projet, j'obtiens ce genre d'erreur lorsque j'essaie de rediriger vers une autre page lorsque la personne soumet le formulaire de contact, alors il devrait rediriger vers une autre page mais j'obtiens ce genre d'erreur. l'erreur que je reç

Redirection du bouton de fermeture ngDialog vers une autre page

user3541485 Je développe une application en utilisant AngularJs pour popup j'utilise ngDialog. Une de mes exigences est: une fois que nous fermons le popup ngDialog, je dois rediriger la page actuelle vers la page d'accueil. Mon code: ngDialog.open({

Redirection vers une page d'erreur sur un autre domaine dans CQ5

Deve1 Je veux comprendre comment rediriger la page d'un domaine vers un autre domaine. Par exemple, je veux faire tomber le site (www.abc.com) et rediriger vers une page d'erreur d'un domaine différent (www.123.com/errorpage). Y a-t-il un moyen de le faire dan

Redirection vers une autre page en cliquant sur un bouton

tharindu Je veux rediriger vers une autre page Web lorsque je clique sur un bouton. Veuillez trouver le code suivant js app.controller('myCtrl', ['$scope', '$location', function($scope, $location) { $scope.redirect = function() { console.log($location.url());

Redirection vers une autre page dans Django

Luis Rodriguez Je travaille dans un projet à Django où quelqu'un essaie de remplir les informations de certains patients et après avoir appuyé sur le bouton d'envoi, je voudrais le rediriger vers une page avec la liste de tous les patients existants, j'essaie