เชิงมุม: เปลี่ยนเส้นทางไปยังเส้นทางด้วยตนเอง

ฉันเพิ่งเริ่มใช้ angular 4 แทน angular.js 1

ฉันได้ติดตามบทช่วยสอนฮีโร่เพื่อเรียนรู้เกี่ยวกับพื้นฐานของ angular 4 และฉันกำลังใช้ "RouterModule" ของเชิงมุมจากแพ็คเกจ "@ angular / router"

ในการดำเนินการอนุญาตบางอย่างสำหรับแอปพลิเคชันของฉันฉันต้องการทราบวิธีการเปลี่ยนเส้นทางไปยังเส้นทางอื่นด้วยตนเองดูเหมือนว่าฉันไม่พบข้อมูลที่เป็นประโยชน์เกี่ยวกับเรื่องนี้บนอินเทอร์เน็ต

การกำหนดเส้นทางเชิงมุม: การนำทางด้วยตนเอง

ก่อนอื่นคุณต้องนำเข้าเราเตอร์เชิงมุม:

import {Router} from "@angular/router"

จากนั้นฉีดเข้าไปในตัวสร้างส่วนประกอบของคุณ:

constructor(private router: Router) { }

และสุดท้ายเรียกใช้.navigateเมธอดทุกที่ที่คุณต้องการ "เปลี่ยนเส้นทาง":

this.router.navigate(['/your-path'])

คุณยังสามารถใส่พารามิเตอร์บางอย่างในเส้นทางของคุณได้เช่นuser/5:

this.router.navigate(['/user', 5])

เอกสารประกอบ: Angular official documentaiton

การเปลี่ยนทิศทางใน angularjs 4 ปุ่มสำหรับเหตุการณ์ในเช่น app.home.html

<input type="button" value="clear" (click)="onSubmit()"/>

และใน home.componant.ts

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

 @Component({
   selector: 'app-root',
   templateUrl: './app.home.html',
 })

 export class HomeComponant {
   title = 'Home';
   constructor(
     private router: Router,
    ) {}

  onSubmit() {
    this.router.navigate(['/doctor'])
 }
 }

คุณควรฉีดเราเตอร์ในตัวสร้างของคุณเช่นนี้

constructor(private router: Router) { }

จากนั้นคุณสามารถทำได้ทุกที่ที่คุณต้องการ

this.router.navigate(['/product-list']);

เชิงมุมเปลี่ยนเส้นทางด้วยตนเอง:นำเข้า@angular/router, ฉีดในการโทรแล้วconstructor()this.router.navigate()

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

constructor(private router: Router) {
  ...
}

onSubmit() {
  ...
  this.router.navigate(['/profile']); 
}

ลองสิ่งนี้:

constructor(  public router: Router,) {
  this.route.params.subscribe(params => this._onRouteGetParams(params));
}
this.router.navigate(['otherRoute']);

คุณอาจมีคำตอบที่ถูกต้องเพียงพอสำหรับคำถามของคุณ แต่ในกรณีที่ IDE ของคุณให้คำเตือน

สัญญาที่ส่งคืนจากการนำทางจะถูกละเว้น

this.router.navigate(['/your-path']).then()คุณอาจจะไม่สนใจคำเตือนหรือการใช้งาน

เปลี่ยนเส้นทางไปยังหน้าอื่นโดยใช้ฟังก์ชันบนไฟล์ component.ts

ส่วนประกอบ:

import {Router} from '@angular/router';
constructor(private router: Router) {}

OnClickFunction()
  {
    this.router.navigate(['/home']);
  }

component.html:

<div class="col-3">                  
<button (click)="OnClickFunction()" class="btn btn-secondary btn-custom mr-3">Button Name</button>
</div>

สิ่งนี้ควรใช้งานได้

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

   YourFunction() {
      this.router.navigate(['/path']);
   }

}