Eine kurze Diskussion über „navigationByUrl' und die Navigation in Angular-Routing-Sprüngen

In diesem Artikel stellen wir Ihnen Angular navigationByUrl und die Navigation im Router-Routing-Sprung vor und erfahren, wie Sie „navigate()“ und „navigateByUrl()“ verwenden.

Bevor wir mit dem eigentlichen Kampf beginnen, werfen wir einen Blick auf die Einführung von NaviByUrl und navigieren in den offiziellen Dokumenten. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

navigateByUrl():

Definition: Navigieren Sie basierend auf der bereitgestellten URL, muss den absoluten Pfad verwenden
Parameter: URL (Zeichenfolge | UrlReee), Extras ( An Objekt, das eine Reihe von Eigenschaften enthält, die die Navigationsstrategie ändern)
Rückgabewert: Gibt ein Versprechen zurück. Wenn die Navigation erfolgreich ist, wird sie zu „true“ aufgelöst. Wenn die Navigation fehlschlägt oder ein Fehler auftritt, wird sie zu „false“ aufgelöst. Wenn unsere Erinnerung an die Definition des absoluten Pfads und des relativen Pfads jedoch etwas vage ist, werde ich direkt ein Beispiel geben, damit ich die Kleinen nicht belästige, noch einmal Du Niang zu suchen, der mich rücksichtsvoll gemacht hat

E:\mySoft\Git\bin  // 绝对路径。从盘符开始
Git\bin  // 相对路径。从当前路径开始

navigate():

Definition: Navigieren Sie basierend auf dem bereitgestellten Befehlsarray und der Startpunktroute. Wenn die Startpunktroute nicht angegeben ist, beginnt die absolute Navigation bei der Stammroute

Parameter: Befehle (beliebig[]), Extras

Rückgabewert: Gibt ein Versprechen zurück. Wenn die Navigation erfolgreich ist, wird sie in „true“ aufgelöst. Wenn die Navigation fehlschlägt, wird sie abgelehnt die Form eines Arrays. Das ist any[]
.

Kehren wir zum Thema zurück und kehren zur Funktion zurück. Diese beiden Methoden werden zum Routing von Sprüngen in Angular verwendet. Wir haben also die folgenden xxx gemeinsamen Verwendungen in tatsächlichen Projekten. Schauen wir sie uns einzeln an. ~~

Im tatsächlichen Kampf definieren wir zunächst drei Routen, nämlich „Route a, Route b, Route c“.

Diese drei Routen sind Geschwisterrouten und befinden sich alle im Stammverzeichnis. Die Verwendung von

---

navigateByUrl

路由a跳转到路由b
this.router.navigateByUrl('b');  // 正确。解析结果是 localhost:4200/b
this.router.navigateByUrl('./b');  // 错误。只能是绝对路径哦

路由b跳转到路由c
this.router.navigateByUrl('cascader', {});  // 解析结果是 localhost:4200/c

---

navigateByUrl ist relativ einfach, leicht zu verstehen und die Verwendung ist relativ einfach. Wir führen hauptsächlich die Verwendung der folgenden Navigation ein: ~~

navigate

1. Route b springt zu Route c (Springe basierend auf der Stammroute)

this.router.navigate(['c']);  // 绝对路径。 localhost:4200/c
this.router.navigate(['./c']);  // 相对路径。 localhost:4200/c

2 aktuelle Route)

this.router.navigate(['c'],{ relativeTo:this.route });  // localhost:4200/b/c
this.router.navigate(['c',1],{ relativeTo:this.route });  // localhost:4200/b/c/1

3. Von Route b zu Route b springen (auf der Grundlage der aktuellen Route springen)

this.router.navigate([],{ relativeTo:this.route });  // localhost:4200/b

4. Von Route b zu Route c springen (den Ankerpunkt in der Route tragen)

this.router.navigate(['c'],{ fragment:'zita' });  // localhost:4200/c#zita
	现在么，成功跳转到路由c了。我又想从路由c跳转到路由a（携带锚点跳转）
	this.router.navigate(['a'], { preserveFragment: true});  // localhost:4200/a#zita

5 . Route b springt zu Route c (Parameter werden in der zu springenden Route übergeben)

this.router.navigate(['c'],{ queryParams:{name:'zita'} });  // localhost:4200/c?name=zita
	现在么，成功跳转到路由c了。我又想从路由c跳转到路由a,有以下五种情况：
	
	（1）不携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: null });  // localhost:4200/a
	（2）携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: 'merge'});  // localhost:4200/a?name=zita
	
	执行完以下三种情况的代码后，看到的页面是路由a的页面哦！
	（3）携带参数。浏览器中的URL不变，参数会失效即,在路由a中打印的参数结果是{}
	this.router.navigate(['a'], { skipLocationChange: true });  // localhost:4200/c?name=zita
	（4）携带参数。浏览器中的URL不变，参数有效。在路由a中打印的参数结果是{name: "zita"}
	this.router.navigate(['a'], {skipLocationChange: true, queryParamsHandling: 'merge'});  // localhost:4200/c?name=zita
	（5）携带参数。浏览器中的URL不变，参数有效，并且携带上其他参数。在路由a中打印的参数结果是{name: "zita",sex: "female"}
	this.router.navigate( ['a'], {skipLocationChange: true, queryParamsHandling: 'merge', queryParams: { sex: 'female' } });  // localhost:4200/c?name=zita

6. Route b springt zu Route c (der aktuelle Status wird während der Navigation nicht im Verlauf aufgezeichnet)

 在路由c中，点击浏览器的返回按钮，会忽略路由b而直接跳转回到路由b的上一层路由
this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

Abschließend Süße ~

Vergessen Sie nicht, den Router einzuführen, wenn Sie Routing verwenden ~~

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

Wenn Sie außerdem die mitgebrachten Parameter ausdrucken möchten, lautet das Code-Snippet wie folgt:

import { Router, ActivatedRoute, Params } from '@angular/router';
ngOnInit() {
    this.route.queryParams.subscribe((params: Params) => {
      console.log(params);
    });
}

happyEnding…

Für weitere Programmierung- Weitere Informationen zu diesem Thema finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über „navigationByUrl' und die Navigation in Angular-Routing-Sprüngen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!