Angular專案下一個路由如何接收到上一個路由url中的引數id
1.父路由routes配置方式:
export const EvaluationQuestionnaireRoute=[
{
path:':edit/:id', //必須是路徑名:/id
component:EditQuestionnaireComponent
},
2.跳轉傳參方式:
模板:
<div [routerLink]="['edit',1]">頁面跳轉傳值</div>
控制器:
import { Router } from '@angular/router';
this.router.navigateByUrl("edit/"+q.id);
this.router.navigate(["edit/",q.id]);
3.子路由獲取父路由引數:
import { Component, OnInit } from '@angular/core';
import {AczivatedRoute} from "@angular/router";
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
constructor(public route: ActivatedRoute) {}
ngOnInit() {
//通過訂閱這種形式來接收父級頁面傳過來的值 this.activatedRoute.params.subscribe(
data=>{
this.id=data.id;
console.log(data.id)}
);
//或者通過
this.route.params['value']['id']
//或者通過
this.id = this.activatedRoute.snapshot.params['id'];
}
}
相關文章
- Go 1.22中路由 URL 路由引數Go路由
- 動態路由(URL引數)路由
- Laravel同時接收路由引數和查詢字串中的引數Laravel路由字串
- jQuery接收url的引數jQuery
- ng4 路由多引數傳參以及接收路由
- Angular路由——子路由Angular路由
- Angular路由——輔助路由Angular路由
- Angular路由——路由基礎Angular路由
- Angular路由——路由守衛Angular路由
- Angular專案路由配置與導航守衛Angular路由
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- beego註解路由中各個引數解釋Go路由
- Angular2入門系列(五)———— 路由引數設定Angular路由
- 笨辦法學C 練習47:一個快速的URL路由路由
- 如何去除vue專案中的 # — vue路由的History模式Vue路由模式
- 一條命令計算 Laravel 專案中註冊的路由數量Laravel路由
- 記一個angular在路由配置中管理 Angular Material Dialog(實現動態元件的彈窗顯示)Angular路由元件
- SpringMVC中@RequestBody接收前端傳來的多個引數SpringMVC前端
- laravel5,5升級到6後,資源路由如何指定 id 為引數Laravel路由
- angular路由傳參Angular路由
- Angular4+路由Angular路由
- 路由元件傳遞引數路由元件
- 5、flask-路由引數Flask路由
- RESTFUL風格的URL請求及引數接收REST
- 【CuteJavaScript】Angular6入門專案(1.構建專案和建立路由)JavaScriptAngular路由
- shell前一個命令結果作為下一個命令引數
- vue中共用一個頁面只是路由引數的變化的單頁面重新渲染Vue路由
- vue router 引入多個路由檔案Vue路由
- django中多個app的路由實現DjangoAPP路由
- Angular路由——在路由時候傳遞資料Angular路由
- vue系列:跳轉到同一個路由引數不同但是不觸發更新的問題Vue路由
- 一個Android路由框架的誕生之路Android路由框架
- 使用Angular CLI生成路由Angular路由
- Laravel request 獲取路由引數Laravel路由
- Angular 如何為多個專案使用單一儲存倉庫Angular
- 使用 C# 9 的records作為強型別ID - 路由和查詢引數C#型別路由
- angular路由中的惰性載入Angular路由
- 兩個路由器如何無線橋接成一個網路 路由器橋接教程詳細路由器橋接