Resove守衛
product TS
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params, RouterLinkActive} from '@angular/router';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
public productId: number;
public productName: string;
constructor(private routerInfo: ActivatedRoute) { }
ngOnInit(): void {
this.routerInfo.params.subscribe((params: Params) => this.productId = params.id);
this.routerInfo.data.subscribe((data: {product: Product}) => {
this.productId = data.product.id;
this.productName = data.product.name;
});
// this.productId = this.routerInfo.snapshot.params["id"];
}
}
export class Product {
// tslint:disable-next-line:typedef
constructor(public id: number,public name: string){
}
}
2.product.resoved.ts
import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {Product, ProductComponent} from '../product/product.component';
import {Injectable, Injector} from '@angular/core';
// @ts-ignore
@Injectable()
export class ProductResoved implements Resolve<Product> {
constructor(private router: Router) {
}
// tslint:disable-next-line:max-line-length
resolve(route: ActivatedRouteSnapshot){
// const productId: number = route.params.id;
let productId: number = route.params["id"];
if (productId == 2){
return new Product(productId, "iPhone8 Plus");
}else{
this.router.navigate(['/home']);
return undefined;
}
}
}
3.app-routing
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'chat', component: ChatComponent, outlet: 'talkroom'},
{path: 'product/:id', component: ProductComponent, children: [
{path: '', component: ProductDescComponent},
{path: 'sellerID/:id', component: SellerInfoComponent}
], resolve: {
product: ProductResoved
}
},
{path: '**', component: Code404Component},
];
4.product HTML
<div class="product">
<p>這裡是商品資訊元件!</p>
<p>商品ID是{{productId}}</p>
<p>商品名稱是 {{productName}}</p>
<a [routerLink]="['./']">商品描述 </a>
<a [routerLink]="['./sellerID',9]">銷售員資訊</a>
<router-outlet></router-outlet>
</div>
相關文章
- Vue — 導航守衛Vue
- Angular路由——路由守衛Angular路由
- 守衛者的挑戰
- Laravel guard 菊花守衛者Laravel
- [NGX]Angular路由守衛初探(1)Angular路由
- vue2.0 實現路由守衛Vue路由
- Vue | 路由守衛面試常考Vue路由面試
- 動手理解導航守衛(Vue)Vue
- “智慧糧倉”守衛中國飯碗
- Vue -- vue-全域性導航守衛Vue
- “360安全衛士團隊版 · 青少年守護計劃”重磅釋出,守衛教育網路淨土
- Angular專案路由配置與導航守衛Angular路由
- Vue 導航守衛(路由的生命週期)Vue路由
- [省選聯考 2024] 迷宮守衛 題解
- Java登陸第四十天——Router路由守衛Java路由
- 2.登入/退出功能(路由導航守衛)路由
- 基於Ardalis.GuardClauses守衛元件的擴充元件
- 使用react-router0-config時的簡易守衛React
- 長安“戰疫”網路安全衛士守護賽writeup
- Angular入門到精通系列教程(13)- 路由守衛(Route Guards)Angular路由
- vue2.0全域性路由守衛(全域性控制登入)Vue路由
- 2024-07-18 給vue專案新增自定義路由守衛Vue路由
- 網路視覺化守衛“數字中國“資訊保安視覺化
- 蔣志皓:人工智慧成為疫情下人們的守衛者人工智慧
- 如何實現一個react-router路由攔截(導航守衛)React路由
- 一篇搞定導航守衛(vue-router原始碼學習)Vue原始碼
- 千鋒長沙前端培訓:VUE-router導航守衛講解前端Vue
- 不可不知 | 密碼法,守護在你身邊的安全衛士密碼
- Filecoin網路的守衛和建設支援FIL幣加價破千
- 騰訊雲容器安全獲得雲安全守衛者計劃優秀案例
- Vue的鉤子函式[路由導航守衛、keep-alive、生命週期鉤子]Vue函式路由Keep-Alive
- 網易易盾上榜雷鋒網2019 AI年度榜單 獲最佳業務安全守衛獎AI
- 全球推薦《帝國守衛戰(Realm Defense)》安卓不刪檔測試今日正式開啟安卓
- vue2.0元件內的守衛(beforeRouteLeave實現 編輯未儲存,彈窗提示)Vue元件
- (系列十一)Vue3框架中路由守衛及請求攔截(實現前後端互動)Vue框架路由後端
- 用AI給黑客出啞謎!騰訊朱雀實驗室新研究Deep Puzzling守衛程式碼安全AI黑客
- 《時序殘響24/36》序夜揭開時間的謊言,怪異少女為守衛而戰
- 對話守衛者蔣志皓:人工智慧和數字經濟,龍騰馬躍正當時人工智慧