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

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

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

@hesammousavi


ثبت پرسش جدید
hossein
hossein
تخصص :برنامه نویس angular-node-js
@hossein.hedyeh6 سال پیشمطرح شد
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
hossein
تخصص :برنامه نویس angular-node-js
@hossein.hedyeh6 سال پیشمطرح شد
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]
})

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

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

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

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


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

@hesammousavi

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

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

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


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

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


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

@hesammousavi

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


hossein
hossein
تخصص :برنامه نویس angular-node-js
@hossein.hedyeh6 سال پیشمطرح شد
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


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

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