مشکل در مسیردهی کامپوننت های انگولار
سلام
توی navbar شش تا منو دارم که یکیش صفحه اصلی (هوم) هستش بقیه هم تماس با ما و .....
حالا من روتینگ کامپوننت ها رو ایجاد کردم اما یه مشکل دارم :
توی منوی اصلی (صفحه هوم 10 تا کامپوننت دارم) حالا وقتی که میخوام به منوهای دیگه مثلا تماس با ما یا بقیه هم برم
این کامپوننت های صفحه اصلی نشون داده میشه در حالی که عملا کامپوننت تماس با ما یا بقیه هیچ محتوایی ندارن ، جز یک تگ پاراگراف
و این کامپوننت هایی که نشون داده میشن فرزندان کامپوننت هوم هستن و نباید توی منوی تماس با ما یا بقیه نشون داده بشن
ممنون میشم کمک کنید
پاسخها
6
حلش کردم ،
اسم مسیر هوم کومپوننت رو خالی گذاشتم
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
دوستان لطفا یه همتی کنید وقتی می بینیم اکثر سوالات جواب گرفتن ولی من موندم جیگرم خون میشه
یه مقدار اطلاعات بیشتر میزارم شاید کمک کنه ، فقط این نکته رو هم بگم در زمان ساخت پروژه انگولاریم سیستم روتینگ توسط 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]
})
سلام الان برای مثال شما
<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>چرا این سه رو کنار هم قرار دادید ؟
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
البته navbar ام رو هم فراموش کردم بزارم که آپدیتش می کنم
درجواب شما هم اینکه می خواستم فوتر و منوهام در تمام صفحات ثابت باشن
بقیه هم متغیر
تگ آوت لت هم که معلومه دیگه
<header><app-navbar></app-navbar></header>
<app-home></app-home>
<app-footer></app-footer>
<router-outlet></router-outlet>
ولی فکر کنم با حرف شما فهمیدم که تگ هوم نباید اینجا باشه !! درسته
بله همه رو باید Router هندل کنه حتی صفحه اصلی رو
معذرت میخوام ، متوجه منظورتون نشدم میشه به صورت مصداقی بگید که دقیقا باید چیکار کنم
چون من انواع راه ها رو تست کردم تگ app-home که از اینجا بردارم کلا نمایش داده نمیشه