Блог

В моей попытке изучить маршрутизацию и навигацию angular я наткнулся на эту часть навигации.

Моя структура компонента Angular:

 AppComponent
    -LandingPage
    -WhatEver1
     -Home
     -Price
     -Sales
    -WhatEver2
     -Blog
     -ContactUs
  

Мои маршруты:

 const appRoutes: Routes = [
  {path: '', component: LandingPageComponent},
  {path: 'whatever-1', component: WhateverComponent},
  {path: 'whatever-2', component: Whatever2Component}
];
  

я попытался разместить две кнопки на целевой странице, чтобы каждая кнопка могла переходить к одному из компонентов.

HTML-часть целевой страницы:

 <div class="row">
    <button class="btn btn-primary" (click)="redirectToTravelLife()">Travel Life</button>
    <button class="btn btn-warning" (click)="redirectToSoftwareLife()">Software Life</button>
  </div>

  <div class="row">
    <router-outlet></router-outlet>
  </div>
  

Машинописный код:

 constructor(private router: Router) {}

  redirectToSoftwareLife() {
      this.router.navigateByUrl('/whatever-1');
  }
  redirectToTravelLife() {
      this.router.navigateByUrl('/whatever-2');
  }
  

Навигация происходит, но кнопки все еще там. как сделать правильную навигацию, чтобы на какой бы компонент я ни перенаправлял, отображался только этот компонент и его дочерние компоненты.

Проблема связана с вашим HTML-компонентом целевой страницы. У вас есть кнопки, которые являются статической частью этой страницы, и маршрутизатор-выход, который является динамическим. Маршрутизатор-розетка служит джокером, что в вашем случае означает, что ваши кнопки всегда будут видны при нажатии на одну из кнопок, и только часть компонента, относящаяся к маршрутизатору-розетке, будет динамически меняться.

У вас должен быть отдельный компонент с кнопками (назовем его LandingPageComponent) и 2 отдельных компонента (Whathever1Component и whathever2component).

В вашем модуле маршрутизатора должны быть маршруты, которые выглядят примерно так:

 const routes: Routes = [
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component},
    {path: 'whatever-2', component: Whatever2Component}
];
  

Теперь у вас будет целевая страница без маршрутизатора, поэтому, когда вы нажмете на кнопку, вы будете перенаправлены на WhateverComponent или Whatever2Component, и, конечно, без отображения кнопок!

Надеюсь, это поможет!

Редактировать:

Что касается вашего комментария («Где я должен хранить свою целевую страницу приложения»), это то, что вам нужно иметь: у вашего компонента приложения должен быть маршрутизатор-выход. Внутри этого маршрутизатора-выхода будут отображаться другие части вашего приложения (целевая страница, whatever1, whatever2, …), и вам понадобится структура маршрутов, которую я уже написал. Вам не нужно никуда помещать app-landing-page, вы уже включили его через routes. Таким образом, когда вы переходите к своему маршруту / целевой странице, этот компонент будет отображаться. Пример:

app.component.html:

 <div>
    <router-outlet></router-outlet>
</div>
  

app-routing.module.ts:

 ...
const routes: Routes = [
    {path: '', redirectTo: 'landingpage', pathMatch: 'full'},
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component,
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent},
        { path: 'price', component: PriceComponent },
        { path: 'sales', component: SalesComponent }
    ]},
    {path: 'whatever-2', component: Whatever2Component,
    children: [
        { path: '', redirectTo: 'blog', pathMatch: 'full' },
        { path: 'blog', component: BlogComponent},
        { path: 'contactus', component: ContactComponent }
    ]}
   ];
...
  

Привет, шрирам, в соответствии со структурой вашего компонента вы хотите перенаправить с родительского компонента на дочерний компонент. Согласно вашей структуре компонента

 -LandingPage
-WhatEver1
 -Home
 -Price
 -Sales
-WhatEver2
 -Blog
 -ContactUs
  

Когда некоторые маршруты могут быть доступны и просматриваться только в рамках других маршрутов, может оказаться целесообразным создать их как дочерние маршруты.
вам необходимо настроить следующую структуру.

 export const routes: Routes = [
  { path: '', redirectTo: 'LandingPage', pathMatch: 'full' },
  { path: 'LandingPage', component: LandingPageComponent },
  { path: 'WhatEver1', component: WhatEver1Component,
  children: [
     { path: '', redirectTo: 'Home', pathMatch: 'full' },
     { path: 'Home', component: HomeComponent},
     { path: 'Price', component: PriceComponent },
     { path: 'Sales', component: SalesComponent }
  ]
 }
];
  

При навигации с помощью navigateByUrl он заменяет содержимое в <router-outlet></router-outlet> целевым компонентом.

Чтобы выполнить вашу задачу, вам нужно разделить кнопки на другой компонент (возможно, что-то вроде NavComponent ).

  const appRoutes: Routes = [
  {path: '', redirectTo: 'nav', pathMatch: 'full'},
  {path: 'nav', component: NavComponent},
  {path: 'whatever-1', component: WhateverComponent},
  {path: 'whatever-2', component: Whatever2Component}
];
  

Вышеуказанные маршруты будут перенаправляться / на /nav . Таким образом, кнопки всегда будут отображаться как целевая страница.

HTH.