কৌণিক 2 রুটে alচ্ছিক রুট পরামিতি থাকা কি সম্ভব? আমি রুটকনফাইগে অ্যাঙ্গুলার 1.x সিনট্যাক্স চেষ্টা করেছি তবে ত্রুটির নীচে পেয়েছি:
"মৌলিক উত্সাহ: পথ" / ব্যবহারকারী /: আইডি? "এতে"? "রয়েছে যা একটি রুট কনফিগারেশনে অনুমোদিত নয়।"
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])উত্তর:
আপনি পরামিতি সহ এবং ছাড়াই একাধিক রুট সংজ্ঞায়িত করতে পারেন:
@RouteConfig([
{ path: '/user/:id', component: User, name: 'User' },
{ path: '/user', component: User, name: 'Usernew' }
])এবং আপনার উপাদানটিতে theচ্ছিক প্যারামিটারটি পরিচালনা করুন:
constructor(params: RouteParams) {
var paramId = params.get("id");
if (paramId) {
...
}
}সম্পর্কিত গিথুব ইস্যুটিও দেখুন: https://github.com/angular/angular/issues/3525
RouteParamsউপাদান কেন আমদানি করছেন না তা ভাবছেন তাদের জন্য : স্ট্যাকওভারফ্লো . com / a / 36792261 / 806202 । সমাধানটি ব্যবহার করার জন্য ActivatedRoute:route.snapshot.params['routeParam']
{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}প্যারামিটার যুক্ত হওয়ার পরে এই উপাদানটি পুনরায় রেন্ডার হয় না।
pathMatch: 'full'পুনঃনির্দেশে যুক্ত করেছি, অন্যথায় মত পথগুলি users/adminআমার ক্ষেত্রেও পুনঃনির্দেশিত হয়েছে
/users/allবা /users/home, 'সমস্ত' বা 'হোম' হিসাবে এটি পড়ুন idএবং এটি যদি আপনার যাদু মানের সাথে মেলে তবে কেবল এটিকে উপেক্ষা করুন। তারপরে উপরের প্রথম লাইনটি হয়ে যায় redirectTo: 'users/home'বা যা আপনি সিদ্ধান্ত নেন । আমার কাছে একটি পিছনে স্ল্যাশ সত্যিই কিছু ভুল হওয়ার কারণ হিসাবে দাঁড়িয়েছে।
তথ্য alচ্ছিক হলে ক্যোয়ারি প্যারামিটার ব্যবহার করার পরামর্শ দেওয়া হয়।
রুট প্যারামিটার বা কোয়েরি প্যারামিটার?
কোন ধরাবাঁধা নিয়ম নেই. সাধারণভাবে,
যখন একটি রুট পরামিতি পছন্দ
- মান প্রয়োজন।
- অন্যটি থেকে একটি রুটের পাথ পৃথক করতে মানটি প্রয়োজনীয়।
যখন একটি কোয়েরি পরামিতি পছন্দ
- মান alচ্ছিক।
- মান জটিল এবং / বা বহু-বৈচিত্র্য।
https://angular.io/guide/router#optional-route-paraters থেকে
আপনাকে কেবল রুটের পথ থেকে প্যারামিটারটি বের করতে হবে।
@RouteConfig([
{
path: '/user/',
component: User,
as: 'User'
}])কৌণিক 4 - paraচ্ছিক প্যারামিটারের ক্রমটির সমাধান করার সমাধান:
এটা কর:
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'products', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent}
]নোট করুন যে productsএবংproducts/:id রুটগুলি ঠিক একই নামকরণ করা হয়েছে কৌণিক 4 সঠিকভাবে productsকোনও পরামিতি ছাড়াই অনুসরণ করবে এবং যদি কোনও পরামিতি অনুসরণ করে products/:id।
তবে, পরামিতিবিহীন রুটের পাথ productsঅবশ্যই আবশ্যক পিছনের স্ল্যাশ থাকা নয় , অন্যথায় কৌণিক এটি ভুলভাবে প্যারামিটার-পাথ হিসাবে বিবেচনা করবে। সুতরাং আমার ক্ষেত্রে, পণ্যগুলির জন্য আমার পিছনে স্ল্যাশ ছিল এবং এটি কার্যকর হয়নি।
এটি করবেন না:
...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...dataউপাদানটিতেও যেতে পারেন, যা প্রতিটি রুটের জন্য একই উপাদান পর্যন্ত আলাদা হতে পারে। উদাহরণ {path: 'products', component: ProductsComponent, data: { showAllProducts: true} },ব্যবহার করা যেতে পারে এবং তারপরে আপনি যাচাই করে নিন showAllProducts। কিছুটা ভাল তারপর একটি নাল জন্য চেক, কিন্তু সাধারণ ক্ষেত্রে সম্ভবত হয় ভাল।
রিরেজের উত্তরটি বেশ সুন্দর তবে এর একটি গুরুতর ত্রুটি রয়েছে। এটি Userউপাদানটি পুনরায় চালিত করার ngOnInitপদ্ধতি তৈরি করে।
আপনি যখন সেখানে কিছু ভারী জিনিস করেন তখন সমস্যা হতে পারে এবং আপনি যখন প্যারামিমেট্রিক নন থেকে প্যারামিমেট্রিকটিতে স্যুইচ করেন তখন এটি পুনরায় চালিত হওয়া চাই না। যদিও এই দুটি রুটগুলি একটি optionচ্ছিক ইউআরএল প্যারামিটার অনুকরণ করার জন্য বোঝানো হয়েছে তবে 2 টি পৃথক রুট হয়ে উঠবে না।
সমস্যাটি সমাধান করার জন্য আমি যা পরামর্শ দিচ্ছি তা এখানে:
const routes = [
{
path: '/user',
component: User,
children: [
{ path: ':id', component: UserWithParam, name: 'Usernew' }
]
}
];তারপরে আপনি পরমকে UserWithParamউপাদানটিতে পরিচালনা করার জন্য দায়ীকে যুক্ত করতে পারেন এবং উপাদানটিতে বেস লজিকটি রেখে যেতে পারেন User। আপনি / ব্যবহারকারী থেকে / ব্যবহারকারী / 123 এUser::ngOnInit নেভিগেট করলে আপনি যা কিছু করেন তা আর চালানো হবে না ।
লাগাতে ভুলবেন না <router-outlet></router-outlet>মধ্যে Userএর টেমপ্লেট।
এখানে প্রস্তাবিত উত্তরগুলি সহ, রিরেজ থেকে গৃহীত উত্তরগুলি সহ একাধিক রুট এন্ট্রি যুক্ত করার পরামর্শ দেয়।
তবে রুট এন্ট্রিগুলির মধ্যে পরিবর্তন করার সময় উপাদানটি পুনরায় তৈরি করা হবে, অর্থাত প্যারামিটার সহ রুট প্রবেশ এবং পরামিতি ছাড়াই প্রবেশের মধ্যে।
আপনি যদি এড়াতে চান তবে আপনি নিজের রুট ম্যাচার তৈরি করতে পারেন যা উভয় রুটের সাথে মিলবে:
export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
if (segments.length > 0 && segments[0].path === 'user') {
if (segments.length === 1) {
return {
consumed: segments,
posParams: {},
};
}
if (segments.length === 2) {
return {
consumed: segments,
posParams: { id: segments[1] },
};
}
return <UrlMatchResult>(null as any);
}
return <UrlMatchResult>(null as any);
}তারপরে আপনার রুট কনফিগারেশনে ম্যাচারটি ব্যবহার করুন:
const routes: Routes = [
{
matcher: userPageMatcher,
component: User,
}
];কৌণিক 4 সহ আমাদের কেবল শ্রেণিবদ্ধভাবে রুটগুলি একসাথে সাজানো দরকার
const appRoutes: Routes = [
{
path: '',
component: MainPageComponent
},
{
path: 'car/details',
component: CarDetailsComponent
},
{
path: 'car/details/platforms-products',
component: CarProductsComponent
},
{
path: 'car/details/:id',
component: CadDetailsComponent
},
{
path: 'car/details/:id/platforms-products',
component: CarProductsComponent
}
];এটি আমার পক্ষে কাজ করে। এই রাউটারটি অপশন আইডি পরামিতিগুলির উপর নির্ভর করে পরবর্তী রুটটি কী তা জানেন।
এই সমস্যার অন্য উদাহরণে দৌড়ে এসে এর সমাধানের সন্ধান করতে এসেছিল। আমার সমস্যাটি হ'ল আমি বাচ্চাদের করছিলাম এবং জিনিসগুলি কিছুটা অপ্টিমাইজ করার জন্য উপাদানগুলির অলস লোডিং করছিলাম। সংক্ষেপে আপনি যদি পিতামাতা মডিউলটি লোড করছেন। প্রধান জিনিসটি ছিল আমার রুটটিতে '/: আইডি' ব্যবহার করা এবং এটি '/' এর অংশ হওয়ার বিষয়ে অভিযোগ। এখানে সঠিক সমস্যা নয়, তবে এটি প্রযোজ্য।
পিতামাতার কাছ থেকে অ্যাপ-রাউটিং
...
const routes: Routes = [
{
path: '',
children: [
{
path: 'pathOne',
loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
},
{
path: 'pathTwo',
loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
},
...শিশু পথ অলস বোঝা
...
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: OverviewComponent
},
{
path: ':id',
component: DetailedComponent
},
]
}
];
...আমি মন্তব্য করতে পারি না, তবে এর প্রসঙ্গে: কৌণিক 2 optionচ্ছিক রুট প্যারামিটার
কৌণিক 6 এর জন্য একটি আপডেট:
import {map} from "rxjs/operators"
constructor(route: ActivatedRoute) {
let paramId = route.params.pipe(map(p => p.id));
if (paramId) {
...
}
}অ্যাঙ্গুলার 6 রাউটিংয়ের অতিরিক্ত তথ্যের জন্য https://angular.io/api/router/ActivatedRoute দেখুন ।
অলস লোডিংয়ের সাথে একই ধরণের সমস্যার মুখোমুখি হয়ে আমি এটি করেছি:
const routes: Routes = [
{
path: 'users',
redirectTo: 'users/',
pathMatch: 'full'
},
{
path: 'users',
loadChildren: './users/users.module#UserssModule',
runGuardsAndResolvers: 'always'
},
[...]এবং তারপরে উপাদানটিতে:
ngOnInit() {
this.activatedRoute.paramMap.pipe(
switchMap(
(params: ParamMap) => {
let id: string = params.get('id');
if (id == "") {
return of(undefined);
}
return this.usersService.getUser(Number(params.get('id')));
}
)
).subscribe(user => this.selectedUser = user);
}এই পথে:
ছাড়া রুটটি সেই পথেই /পুনঃনির্দেশিত হয়। কারণ pathMatch: 'full', কেবলমাত্র এই জাতীয় নির্দিষ্ট রুটই পুনঃনির্দেশিত হয়।
তারপরে, users/:idগৃহীত হয়। যদি আসল রুটটি ছিল users/, idতবে ""তাই এটি পরীক্ষা করে দেখুন ngOnInitএবং সেই অনুযায়ী কাজ করুন; অন্যথায়, idআইডি এবং এগিয়ে যান।
সংস্থাগুলির বাকী কাজগুলি অপরিজ্ঞাত selectedUserবা না হয় (* এনজিআইফ এবং এর মতো জিনিসগুলি)।