Umleitung innerhalb der Komponente Winkel 2

75

Ich habe eine einfache Methode, die ich am Ende auf eine andere Komponente umleiten möchte:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

  }
}

Was ich tun möchte, ist am Ende der Methode eine Umleitung zu einer anderen Komponente:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

    this.redirectTo('foo');
  }
}

Wie erreiche ich dies in Angular 2?

Drei Akzente
quelle
Ich kann nur an Routing denken. Sie können das mit navigieren
Eric Martinez

Antworten:

94

Konfigurieren Sie zuerst das Routing

import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

und

@RouteConfig([
  { path: '/addDisplay', component: AddDisplay, as: 'addDisplay' },
  { path: '/<secondComponent>', component: '<secondComponentName>', as: 'secondComponentAs' },
])

dann in Ihre Komponente importieren und dann Router injizieren

import {Router} from 'angular2/router'

export class AddDisplay {
  constructor(private router: Router)
}

Das Letzte, was Sie tun müssen, ist anzurufen

this.router.navigateByUrl('<pathDefinedInRouteConfig>');

oder

this.router.navigate(['<aliasInRouteConfig>']);
Kit
quelle
Zu Ihrer Information: navigateByUrlAkzeptiert kein Array. Nur eine einzige Saite.
Ben Thielker
1
Wie lade ich die Ansicht neu? navigateund navigateByUrlscheinen die URL zu ändern, aber die an die Route gebundenen Komponenten werden nicht neu geladen.
Dopatraman
9
Hinweis: Diese Antwort bezieht sich auf eine Beta- oder Release-Candidate-Version von Angular 2 und gilt nicht mehr für Angular 2 final.
Jbandi
6

Die Antwort von @ kit ist in Ordnung, aber denken Sie daran, die ROUTER_PROVIDERSAnbieter in der Komponente zu ergänzen . Anschließend können Sie innerhalb der ngOnInitMethode auf eine andere Seite umleiten :

import {Component, OnInit} from 'angular2/core';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'

@Component({
    selector: 'loginForm',
    templateUrl: 'login.html',
    providers: [ROUTER_PROVIDERS]
})

export class LoginComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['./SomewhereElse']);
    }

}

quelle
23
Hinweis: Diese Antwort bezieht sich auf eine Beta- oder Release-Candidate-Version von Angular 2 und gilt nicht mehr für Angular 2 final.
Jbandi
2
@jbandi könntest du dann bitte eine aktualisierte Antwort geben?
Hugo
4

Das hat bei mir funktioniert Angular cli 6.x:

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

constructor(private artistService: ArtistService, private router: Router) { }

  selectRow(id: number): void{
       this.router.navigate([`./artist-detail/${id}`]);

  }

quelle
1
callLog(){
    this.http.get('http://localhost:3000/getstudent/'+this.login.email+'/'+this.login.password)
    .subscribe(data => {
        this.getstud=data as string[];
        if(this.getstud.length!==0) {
            console.log(data)
            this.route.navigate(['home']);// used for routing after importing Router    
        }
    });
}
PYRO BUG
quelle
Hallo PYRO BUG, ​​willkommen. Bitte fügen Sie eine Erklärung hinzu.
Tiago Martins Peres 30