Angular: перенаправление с компонента на компонент - PullRequest
Новая
       11

Angular: перенаправление с компонента на компонент

0 голосов
/ 14 марта 2019

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

Моя угловая структура компонентов: 

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>

Код TypeScript: 

constructor(private router: Router) {}

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

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

Ответы [ 3 ]

3 голосов
/ 14 марта 2019

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

Вам нужно разделить компонент кнопками (назовем его LandingPageComponent) и двумя отдельными компонентами (Whathever1Component и Wh what2Component).

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

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

Теперь у вас будет целевая страница без роутера-розетки, поэтому при нажатии на кнопку вы будете перенаправлены на WhwhatComponent или Wh what2Component, и, конечно, без кнопок, отображаемых!

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

EDIT:

Относительно вашего комментария («Где я должен хранить свою целевую страницу приложения»), это то, что вам нужно: ваш прикладной компонент должен иметь роутер-выход. Внутри этого маршрутизатора-розетки будут отображаться другие части вашего приложения (целевая страница, что угодно 1, что угодно 2, ...), и вам потребуется структура маршрутов, которую я уже написал. Вам не нужно никуда добавлять приложение-лендинг, вы уже включили его через маршруты. Поэтому, когда вы переходите на страницу маршрута / лендинга, этот компонент будет отображаться. Пример:

app.component.html: 

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

приложение-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 }
    ]}
   ];
...
0 голосов
/ 14 марта 2019

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

-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 }
  ]
 }
];
0 голосов
/ 14 марта 2019

При навигации с использованием 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.

...