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路由字串
- 一個vue路由引數傳遞的注意點Vue路由
- jQuery接收url的引數jQuery
- Angular路由——子路由Angular路由
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- Angular路由——路由守衛Angular路由
- Angular路由——路由基礎Angular路由
- Angular路由——輔助路由Angular路由
- 給一個介面傳遞引數,並接收返回的引數
- beego註解路由中各個引數解釋Go路由
- Angular專案路由配置與導航守衛Angular路由
- Angular2入門系列(五)———— 路由引數設定Angular路由
- 一個Android路由框架的誕生之路Android路由框架
- 一條命令計算 Laravel 專案中註冊的路由數量Laravel路由
- 如何去除vue專案中的 # — vue路由的History模式Vue路由模式
- 一個由mobxobserver引發的ReactRoute路由失效問題探究ServerReact路由
- 記一個angular在路由配置中管理 Angular Material Dialog(實現動態元件的彈窗顯示)Angular路由元件
- SpringMVC中@RequestBody接收前端傳來的多個引數SpringMVC前端
- 解決多個路由繫結同一個元件 獲取引數只獲取一次的方法路由元件
- 路由元件傳遞引數路由元件
- 5、flask-路由引數Flask路由
- angular路由傳參Angular路由
- Angular4+路由Angular路由
- angular 路由傳參Angular路由
- angular 巢狀路由Angular巢狀路由
- RESTFUL風格的URL請求及引數接收REST
- shell前一個命令結果作為下一個命令引數
- Nodejs獲取url路徑中的各個引數NodeJS
- django中多個app的路由實現DjangoAPP路由
- MyBatis 如何接收引數MyBatis
- Flutter如何為初始路由新增動畫?頁面中單個元素又如何隨路由動起來?Flutter路由動畫
- 沒有Angular 3,下一個Angular主版本將是Angular 4Angular
- vue中共用一個頁面只是路由引數的變化的單頁面重新渲染Vue路由
- 【CuteJavaScript】Angular6入門專案(1.構建專案和建立路由)JavaScriptAngular路由
- vue router 引入多個路由檔案Vue路由
- Laravel 路由中不固定數量引數,是如何實現的?Laravel路由