web-dev-qa-db-ja.com

Angularクリックで2リダイレクト

Angular 2？のボタンをクリックして簡単なリダイレクトを作成する方法は？

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']);
    }

}
javascriptredirectangular
12
TeodorKolev

Angular2のイベントサポートを活用できます。

@Component({
  selector: 'loginForm',
  template: `
    <div (click)="redirect()">Redirect</div>
  `,
  providers: [ROUTER_PROVIDERS]
})
export class LoginComponent implements OnInit {
  constructor(private router: Router) { }

  redirect() {
    this.router.navigate(['./SomewhereElse']);
  }
}
24
Thierry Templier

メソッドパラメータを使用してより動的にします

angularルーターをインポートする

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

クリックイベントでボタンを作成する

<div (click)="redirect(my-page)">My page</div>

Pagenameパラメーターを使用してメソッドを作成する

redirect(pagename: string) {
  this.router.navigate(['/'+pagename]);
}

クリックすると、ルーターは正しいページにルーティングするはずです

11
0x1ad2

routerLinkディレクティブを使用し、a（anchor）タグの上に配置したと思います

_<a [routerLink]="['./SomewhereElse']">Redirect</a>
_

また、providersから_ROUTER_PROVIDERS_を削除して、bootstrap=依存関係に含めてから、コンポーネントのディレクティブオプションに_ROUTER_DIRECTIVES_を追加して、HTMLでrouterLinkディレクティブを使用する必要があります。 RouterModuleとそのルートがMain Appモジュールに挿入されていることを確認してください。

11
Pankaj Parkar

routerLinkonボタンタグをお試しください

 <button type="button"  [routerLink]="['/edit']">Edit</button>

詳細

7
atish shimpi

window.location.reload（）;トリックをします

0
java1977