typescript - Angular 2 - ฉันจะไปยังเส้นทางอื่นโดยใช้ this.router.parent.navigate('/about') ได้อย่างไร?

Angular 2 - ฉันจะไปยังเส้นทางอื่นโดยใช้ this.router.parent.navigate('/about') ได้อย่างไร?

ดูเหมือนว่ามันจะใช้ไม่ได้ ฉันลอง location.go("/about"); เพราะมันไม่ทำงาน

โดยพื้นฐานแล้ว เมื่อผู้ใช้เข้าสู่ระบบแล้ว ฉันต้องการเปลี่ยนเส้นทางพวกเขาไปยังหน้าอื่น

นี่คือโค้ดของฉันด้านล่าง:

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('[email ', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }

คำตอบ #1

การกำหนดเส้นทางแบบเส้นทางตรง

มีวิธีการนำทาง 2 วิธี คือ .navigate() และ .navigateByUrl()

คุณสามารถใช้วิธี .navigateByUrl() สำหรับการทำเส้นทางแบบเส้นทางสมบูรณ์:

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

คุณใส่เส้นทางสมบูรณ์ไปยัง URL ของคอมโพเนนต์ที่คุณต้องการนำทางไป

หมายเหตุ: ให้ระบุเส้นทางสัมบูรณ์ทั้งหมดเสมอเมื่อเรียกใช้เมธอด navigateByUrl ของเราเตอร์ เส้นทางสัมบูรณ์ต้องเริ่มต้นด้วย /

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

การเส้นทางแบบเส้นทางสัมพันธ์

ถ้าคุณต้องการใช้การกำหนดเส้นทางแบบเส้นทางสัมพันธ์ ให้ใช้วิธี .navigate()

หมายเหตุ: วิธีการทำงานของการกำหนดเส้นทางค่อนข้างไม่ตรงไปตรงมา โดยเฉพาะเส้นทางของพ่อแม่ พี่น้อง และลูก:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

หรือถ้าคุณเพียงแค่ต้องการนำทางภายในเส้นทางปัจจุบัน แต่ไปยังพารามิเตอร์เส้นทางที่ต่างกัน:

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

อาร์เรย์พารามิเตอร์ลิงก์

อาร์เรย์พารามิเตอร์ลิงก์จะเก็บส่วนประกอบต่อไปนี้สำหรับการนำทางเราท์เตอร์:

• เส้นทางของรูทไปยังคอมโพเนนต์ปลายทาง ['/hero']
• พารามิเตอร์เส้นทางที่จำเป็นและไม่บังคับที่ใส่เข้าไปใน URL ของเส้นทาง ['/hero', hero.id] หรือ ['/hero', { id: hero.id, foo: baa }]

ไวยากรณ์แบบไดเรกทอรี

เราเตอร์รองรับไวยากรณ์แบบเหมือนไดเรกทอรีในรายการพารามิเตอร์ลิงก์เพื่อช่วยชี้แนวทางการค้นหาชื่อเส้นทาง:

./ หรือไม่มีเครื่องหมายทับนำ หมายถึงสัมพันธ์กับระดับปัจจุบัน

../ เพื่อขึ้นไปหนึ่งระดับในเส้นทางของ route.

คุณสามารถรวมไวยากรณ์การนำทางเชิงสัมพันธ์เข้ากับเส้นทางของบรรพบุรุษได้ หากคุณจำเป็นต้องนำทางไปยังเส้นทางพี่น้อง คุณสามารถใช้รูปแบบ ../<sibling> เพื่อขึ้นไปหนึ่งระดับ จากนั้นไปทางด้านข้างและลงเส้นทางของพี่น้อง

หมายเหตุสำคัญเกี่ยวกับการนำทางแบบสัมพัทธ์

ในการนำทางเส้นทางสัมพัทธ์ด้วยวิธี Router.navigate คุณต้องระบุ ActivatedRoute เพื่อให้ตัว router รับรู้ว่าคุณอยู่ที่ใดในต้นไม้เส้นทางปัจจุบัน

หลังจากอาร์เรย์พารามิเตอร์ลิงก์ ให้เพิ่มอ็อบเจ็กต์ที่มีคุณสมบัติ relativeTo ตั้งค่าเป็น ActivatedRoute จากนั้นตัว router จะคำนวณ URL เป้าหมายตามตำแหน่งของเส้นทางที่ถูกใช้งานอยู่

จากเอกสารอย่างเป็นทางการของ Angular Router

คำตอบ #2

คุณควรใช้

this.router.parent.navigate(['/About']);

นอกจากการระบุเส้นทางแล้ว คุณยังสามารถระบุชื่อของเส้นทางของคุณได้ด้วย:

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);

คำตอบ #3

สามารถใช้ได้โดยไม่ต้องมี parent ด้วย

พูดคำนิยามของเราเตอร์แบบ:

{path:'/about',    name: 'About',   component: AboutComponent}

จากนั้นสามารถนำทางโดยใช้ name แทน path

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

อัปเดตสำหรับ V2.3.0

ในการ Routing จาก v2.0 คุณสมบัติ name ไม่สามารถใช้งานได้อีกต่อไป การกำหนด route จะทำโดยไม่มีคุณสมบัติ name ดังนั้นคุณควรใช้ path แทน name this.router.navigate(['/path']) และ ไม่ต้องมี slash นำหน้า สำหรับ path ดังนั้นให้ใช้ path: 'about' แทน path: '/about'

คำจำกัดความของเราเตอร์เหมือน:

{path:'about', component: AboutComponent}

จากนั้นสามารถนำทางโดยใช้ path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}

คำตอบ #4

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');