मैं आसानी से एक मूल घटक के अंदर एक बाल घटक प्रदर्शित कर सकता हूं, लेकिन मैं मार्ग के आधार पर बच्चे के प्रदर्शन को कैसे बदल सकता हूं?

क्या बच्चे के घटकों को छिपाने और दिखाने के लिए *ngIf's का उपयोग किए बिना इस तरह एक रूटिंग तंत्र बनाना संभव है?

मेरे पास एक प्रोफाइल पेज है, उदा। ../सदस्य/संपादित करें

जब आप पहली बार पेज पर जाते हैं तो मैं चाइल्ड कंपोनेंट को लोड और प्रदर्शित करना चाहता हूं

<app-profile-menu-items>

इस तरह

<app-parent-component class="container">
  <div class="col-2">
    // general info 
  </div>
  <div class="col-10">
    // child component here
    // only want to show 1 child at a time based on some routing
    <app-profile-menu-items></app-profile-menu-items>
  </div>
</app-parent-component>

यह चाइल्ड कंपोनेंट <app-profile-menu-items>

इसमें (/सदस्य/संपादित/जानकारी,/सदस्य/संपादित/छवियां, आदि) से चयन करने के लिए विकल्पों (लिंक) की एक सूची है, जिसे क्लिक करने पर उस बच्चे के घटक को प्रदर्शित करना चाहिए और छिपाना चाहिए

<app-profile-menu-items> // नीचे दिखाए जाने पर छिपा हुआ

<app-profile-menu-info></app-profile-menu-info>
<app-profile-menu-images></app-profile-menu-images>
<app-profile-menu-location></app-profile-menu-location>

इसके अतिरिक्त, रूटिंग कैसे काम करेगी उदा। पथ: 'संपादित/जानकारी', मैं घटक के लिए क्या उपयोग करूंगा?

{ path: 'edit', component: MemberEditComponent, resolve: {user: MemberEditResolver}, canDeactivate: [PreventUnsavedChangesGuard]},
1
user1186050 21 नवम्बर 2020, 03:11

2 जवाब

सबसे बढ़िया उत्तर

आपका पैरेंट टेम्प्लेट कुछ इस तरह होना चाहिए और इसमें राउटरआउटलेट होना चाहिए:

<app-parent-component class="container">
    <div class="col-2">
      // general info 
    </div>
    <div class="col-10">
      // child component here
      // only want to show 1 child at a time based on some routing
      <router-outlet></router-outlet>
    </div>
</app-parent-component>

और रूटिंग मॉड्यूल में आपके मार्ग:

const routes: Routes = [
{
    path: '',            //<---- parent component declared here
    component: ParentComponent,
    children: [                          
        {
            path:'child-1',
            component: Child1Component  // <-- Child component 
        },
        {
            path:'child-2',
            component: Child2Component  // <-- Child component 
        },
        {
            path:'child-3',
            component: Child3Component // <-- Child component 
        }
    ]
 }
];
2
Arash Hatami 21 नवम्बर 2020, 08:57

आप निम्नानुसार मार्ग निर्धारित कर सकते हैं।

const routes: Routes = [
    {
        path: 'parent-component',            //<---- parent component declared here
        component: ParentComponent,
        children: [                          
            {
                path:'profile-menu-items',
                component: ProfileMenuItemsComponent  // <-- Child component 
            },
            {
                path:'profile-menu-images',
                component: ProfileMenuImagesComponent  // <-- Child component 
            },
            {
                path:'profile-menu-location',
                component: ProfileMenuLocationComponent // <-- Child component 
            }
        ]
     }
  ];
1
Kavinda Senarathne 21 नवम्बर 2020, 05:00