hossein
5 سال پیش توسط hossein مطرح شد
6 پاسخ

مشکل در مسیردهی کامپوننت های انگولار

سلام
توی navbar شش تا منو دارم که یکیش صفحه اصلی (هوم) هستش بقیه هم تماس با ما و .....
حالا من روتینگ کامپوننت ها رو ایجاد کردم اما یه مشکل دارم :
توی منوی اصلی (صفحه هوم 10 تا کامپوننت دارم) حالا وقتی که میخوام به منوهای دیگه مثلا تماس با ما یا بقیه هم برم
این کامپوننت های صفحه اصلی نشون داده میشه در حالی که عملا کامپوننت تماس با ما یا بقیه هیچ محتوایی ندارن ، جز یک تگ پاراگراف
و این کامپوننت هایی که نشون داده میشن فرزندان کامپوننت هوم هستن و نباید توی منوی تماس با ما یا بقیه نشون داده بشن
ممنون میشم کمک کنید

@hesammousavi


ثبت پرسش جدید
hossein
تخصص : برنامه نویس angular-node-js
@hossein.hedyeh 5 سال پیش آپدیت شد
0

حلش کردم ،
اسم مسیر هوم کومپوننت رو خالی گذاشتم

const routes: Routes = [
  {path: '' , component: HomeComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'lists', component: ListsComponent },
  {path: 'pages', component: PageseComponent },
  {path: 'blog', component: BlogComponent },
  {path: 'contact-us', component: ContactUsComponent }
];

و تگ app-home رو نیز از app.component.html برداشتم

<header><app-navbar></app-navbar></header>
<!-- <app-home></app-home> -->
<router-outlet></router-outlet>
<app-footer></app-footer>

قبلش یه ویدیو هم از یوتیوب نگاه کردم با لینک زیر :
https://www.youtube.com/watch?v=Nehk4tBxD4o


hossein
تخصص : برنامه نویس angular-node-js
@hossein.hedyeh 5 سال پیش مطرح شد
0

دوستان لطفا یه همتی کنید وقتی می بینیم اکثر سوالات جواب گرفتن ولی من موندم جیگرم خون میشه
یه مقدار اطلاعات بیشتر میزارم شاید کمک کنه ، فقط این نکته رو هم بگم در زمان ساخت پروژه انگولاریم سیستم روتینگ توسط cli انگولار ایجاد شده

app.component.html

<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

app-routing-module.html

const routes: Routes = [
  {path: 'Home' , component: HomeComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'lists', component: ListsComponent },
  {path: 'pages', component: PageseComponent },
  {path: 'blog', component: BlogComponent },
  {path: 'contact-us', component: ContactUsComponent }
];

home.component.html

<app-header></app-header>
<app-section-category></app-section-category>
<app-list-pruducts></app-list-pruducts>
<app-slider></app-slider>
<app-box-feature></app-box-feature>
<app-counter></app-counter>
<app-package></app-package>
<app-slider-footer></app-slider-footer>
<app-email></app-email>
<app-feature-footer></app-feature-footer>

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SectionCategoryComponent,
    ListPruductsComponent,
    SliderComponent,
    BoxFeatureComponent,
    CounterComponent,
    AppPackageComponent,
    SliderFooterComponent,
    EditClassDirective,
    EmailComponent,
    FeatureFooterComponent,
    FooterComponent,
    FooterCopyrightComponent,
    HomeComponent,
    HeaderComponent,
    CategoriesComponent,
    ListsComponent,
    PageseComponent,
    BlogComponent,
    ContactUsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})

حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
1

سلام الان برای مثال شما

<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

چرا این سه رو کنار هم قرار دادید ؟


hossein
تخصص : برنامه نویس angular-node-js
@hossein.hedyeh 5 سال پیش مطرح شد
0

@hesammousavi

البته navbar ام رو هم فراموش کردم بزارم که آپدیتش می کنم
درجواب شما هم اینکه می خواستم فوتر و منوهام در تمام صفحات ثابت باشن
بقیه هم متغیر
تگ آوت لت هم که معلومه دیگه

<header><app-navbar></app-navbar></header>
<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>

ولی فکر کنم با حرف شما فهمیدم که تگ هوم نباید اینجا باشه !! درسته


حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
1

بله همه رو باید Router هندل کنه حتی صفحه اصلی رو


hossein
تخصص : برنامه نویس angular-node-js
@hossein.hedyeh 5 سال پیش مطرح شد
0

@hesammousavi

معذرت میخوام ، متوجه منظورتون نشدم میشه به صورت مصداقی بگید که دقیقا باید چیکار کنم
چون من انواع راه ها رو تست کردم تگ app-home که از اینجا بردارم کلا نمایش داده نمیشه


hossein
تخصص : برنامه نویس angular-node-js
@hossein.hedyeh 5 سال پیش آپدیت شد
0

حلش کردم ،
اسم مسیر هوم کومپوننت رو خالی گذاشتم

const routes: Routes = [
  {path: '' , component: HomeComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'lists', component: ListsComponent },
  {path: 'pages', component: PageseComponent },
  {path: 'blog', component: BlogComponent },
  {path: 'contact-us', component: ContactUsComponent }
];

و تگ app-home رو نیز از app.component.html برداشتم

<header><app-navbar></app-navbar></header>
<!-- <app-home></app-home> -->
<router-outlet></router-outlet>
<app-footer></app-footer>

قبلش یه ویدیو هم از یوتیوب نگاه کردم با لینک زیر :
https://www.youtube.com/watch?v=Nehk4tBxD4o


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام