navigateByUrl と Angular ルーティング ジャンプのナビゲートに関する簡単な説明

この記事では、Angular NavigateByUrl と Router ルーティング ジャンプのナビゲートを紹介し、navigate() と navigateByUrl() の使用方法を説明します。

実際の戦闘を始める前に、公式ドキュメントで navigateByUrl と navigate の概要を見てみましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

navigateByUrl():

定義: 指定された URL に基づいて移動します 絶対パスを使用する必要があります。
パラメータ: url (文字列 | UrlReee)、extras (ナビゲーション戦略を変更する一連のプロパティを含むオブジェクト)
戻り値: Promise を返します。ナビゲーションが成功した場合は true に解決され、ナビゲーションが失敗した場合やエラーが発生した場合は false に解決されます

ps: navigateByUrl の使用法と定義に関する公式の説明は非常に明確です。ただし、絶対パスと相対パスの定義の記憶が少し曖昧な場合は、小さな子供たちが再び Du Niang を探しに行く手間を省くために、直接例を示します。

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

navigate():

定義: 指定されたコマンド配列と起点ルートに基づいて移動します。始点ルートが指定されていない場合は、ルートルートから絶対ナビゲーションを開始します。

パラメータ：commands(any[])、extras
戻り値：Promiseを返します。ナビゲーションが成功した場合は true に解決され、ナビゲーションが失敗した場合は false に解決され、ナビゲーション エラーが発生した場合は拒否 (拒否) されます。

注目すべき点は、# の最初の部分です。 ##navigate 各パラメータは配列形式、つまり any[]

である必要があります。 トピックに戻り、関数に戻りますが、これら 2 つのメソッドは、Angular でジャンプをルーティングするために使用されます。次に、実際のプロジェクトで一般的な xxx の使用法を次に示します。1 つずつ見てみましょう~~

---

実際の戦闘では、まず 3 つのルートを定義します。 、bルート、cルート」。

これら 3 つのルートは兄弟ルートであり、すべてルート ディレクトリにあります。

---

navigateByUrl

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

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

navigateByUrl の使用法は比較的シンプルで理解しやすく、使用方法も比較的単純です。 navigate~~

navigate

1. ルートbからルートcへジャンプ(ルートルートを基にジャンプ)

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

# の使い方を主に紹介します。 ##2. ルート b からルート c にジャンプ (現在のルートに基づいてジャンプ)

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. ルート b からルート b にジャンプ (現在のルートに基づいてジャンプ) )

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

4 . ルート b からルート c にジャンプします (ジャンプするルートにアンカーポイントを渡します)

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

5. ルート b からルート c にジャンプします (ジャンプするルートにパラメータを渡します) 転送)

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. ルート b からルート c にジャンプします (ナビゲーション中、現在の状況は履歴に記録されません)

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

最後に、かわいい子たち ~

ルーティングを使用するときはルーターを導入することを忘れないでください~~

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

さらに、渡されたパラメータを出力したい場合、コード スニペットは次のとおりです:

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

happyEnding…

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がnavigateByUrl と Angular ルーティング ジャンプのナビゲートに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。