Angular 2 - วิธีนำทางไปยังเส้นทางอื่นโดยใช้ this.router.parent.navigate ('/ about')

เชิงมุม 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('Mark@gmail.com', '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');

       });
   }
 }

เส้นทางที่แน่นอน

การนำทางมี 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 }]

ไวยากรณ์เหมือนไดเรกทอรี

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

./ หรือไม่มีสแลชชั้นนำสัมพันธ์กับระดับปัจจุบัน

../ เพื่อเพิ่มระดับหนึ่งในเส้นทางเส้นทาง

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

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

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

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

จากเอกสารเราเตอร์เชิงมุมอย่างเป็นทางการ

คุณควรใช้

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

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

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

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

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

พูดคำนิยามเราเตอร์เช่น:

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

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

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

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

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

นิยามเราเตอร์เช่น:

{path:'about', component: AboutComponent}

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

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

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

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

โดยส่วนตัวแล้วฉันพบว่าเนื่องจากเราเก็บngRoutesสะสม (เรื่องยาว) ฉันพบความเพลิดเพลินที่สุดจาก:

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

จริง ๆ แล้วฉันใช้มันเป็นส่วนหนึ่งของคำถามสัมภาษณ์ของเรา ด้วยวิธีนี้ฉันสามารถอ่านได้ทันทีว่าใครเป็นผู้พัฒนาไปตลอดกาลโดยดูว่ามีใครกระตุกเมื่อพวกเขาพบGOTO(1)กับการเปลี่ยนเส้นทางโฮมเพจ