Ich versuche, durch Klicken auf eine Schaltfläche zu einer anderen Seite zu navigieren, aber es funktioniert nicht. Was könnte das Problem sein. Ich lerne jetzt Winkel 2 und es ist jetzt ein bisschen schwierig für mich.

//Routes/Path in a folder call AdminBoard

export const AdminRoutes: Routes =[

  {
    path: 'dashboard',

    component: AdminComponent,
    children: [
      {path: '', redirectTo: 'Home'},
      {path: 'Home', component: HomeComponent},
      {path: 'Service', component: ServiceComponent},
      {path: 'Service/Sign_in', component:CustomerComponent}

    ]

  }

];

//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}

  <button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>

Verwenden Sie es so, sollte funktionieren:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

Sie können auch router.navigateByUrl('..')wie folgt verwenden:

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>    

import { Router } from '@angular/router';

btnClick= function () {
        this.router.navigateByUrl('/user');
};

Aktualisieren

Sie müssen Routerden Konstruktor wie folgt einfügen :

constructor(private router: Router) { }

Nur dann können Sie verwenden this.router. Denken Sie auch daran, RouterModulein Ihr Modul zu importieren .

Update 2

Jetzt können Sie nach Angular v4 direkt ein routerLinkAttribut auf der Schaltfläche hinzufügen (wie von @mark im Kommentarbereich erwähnt), wie unten -

 <button [routerLink]="'/url'"> Button Label</button>

Sie können routerLink folgendermaßen verwenden:

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">

Oder verwenden Sie <button [routerLink]="['./url']">in Ihrem Fall für weitere Informationen den gesamten Stacktrace auf github https://github.com/angular/angular/issues/9471

Die anderen Methoden sind ebenfalls korrekt, erzeugen jedoch eine Abhängigkeit von der Komponentendatei.

Hoffe, Ihr Anliegen ist gelöst.

 <button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>


import { Router } from '@angular/router';

btnClick= function () {
        this.router.navigate(['/user']);
};

Es ist wichtig, dass Sie die Router-Verbindung und die Verbindung mit eckigen Klammern wie folgt dekorieren:

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

Wobei " / service " in diesem Fall die in der Routing-Komponente angegebene Pfad-URL ist.

Die Router-Verbindung auf der Schaltfläche zu haben, scheint für mich gut zu funktionieren:

<button class="nav-link" routerLink="/" (click)="hideMenu()">
     <i class="fa fa-home"></i> 
     <span>Home</span>
</button>

du kannst ändern

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

auf Komponentenebene im Konstruktor wie unten

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}

Folge diesen Schritten

Fügen Sie Import in Ihre Hauptkomponente hinzu

import {Router } from '@angular/router';

Fügen Sie in derselben Datei den folgenden Code für Konstruktor und Methode hinzu

constructor(private route: Router) {}
public Dashbord()
{
 this.route.navigate(['/dashboard']);
}

Dies ist Ihr .htmlDateicode

<button mat-button (click)="Dashbord()">Dashboard</button><br>

In app-routing.module.tsDatei Dashboard hinzufügen

const routes: Routes =
[
  { path: '', pathMatch: 'full' ,component: TestComponent},
  { path: 'dashboard', component: DashboardComponent } 
];

Viel Glück.