मैं कोणीय में अपनी रूटिंग के साथ मूल घटक के अंदर एक विशिष्ट बाल घटक कैसे प्रदर्शित कर सकता हूं?

Question

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

क्या बच्चे के घटकों को छिपाने और दिखाने के लिए *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]},

angular angular-routing angular-components angular-component-router

1

user1186050 21 नवम्बर 2020, 03:11

Answer 1

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

<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

Answer 2

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

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

मैं कोणीय में अपनी रूटिंग के साथ मूल घटक के अंदर एक विशिष्ट बाल घटक कैसे प्रदर्शित कर सकता हूं?

2 जवाब

संबंधित सवाल

नए सवाल

angular