Angular 9 - Маршрутизация целевой страницы [Trivial] - PullRequest
Новая
       15

Angular 9 - Маршрутизация целевой страницы [Trivial]

0 голосов
/ 14 апреля 2020

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

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RoomComponent } from './room/room.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'room', component: RoomComponent },
  { path: '', component: AppComponent},
  { path: '**', component: AppComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    RoomComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 Ответ

1 голос
/ 14 апреля 2020

Я думаю, вам следует переместить вашу целевую страницу в отдельный компонент, например, компонент с именем landing и сопоставить этот новый компонент со значением по умолчанию route '' ; 

const appRoutes: Routes = [
  { 
    path: 'room', 
    component: RoomComponent 
  },
  { 
    path: '', 
    component: LandingComponent,
    pathMatch: 'full'
  },
  { 
    path: '**', 
    redirectTo: ''
  }
];

Ваш app.component. html должен сохранять только глобальный макет (меню навигации, если у вас есть, основной контент и, в конечном итоге, нижний колонтитул) и самый важный, выход маршрутизатора . 

<!-- App component should contains application layout -->

<nav class="app-menu">
  <!-- Your app menu should go here. Will be visible on each application "page" -->
</nav>

<main class="app-content">
  <!-- Only router outlet to insert component as main content when route change -->
  <router-outlet></router-outlet>
</main>

<footer>
  <!-- Your app footer should go there. Will be visible on each application "page" -->
</footer>

Затем на целевой странице используйте ссылку роутера на кнопку, которая нацелена на «/ комнату». Когда пользователь нажмет на кнопку, маршрут изменится на / room, и маршрутизатор загрузит RoomComponent (который соответствует маршруту / room) и вставит его в выходной маршрутизатор вместо предыдущего LandingComponent. 

<p>
landing works!
</p>
<button [routerLink]="['/room']">Go to room</button>

Таким образом, вам больше не нужно скрывать целевую страницу, маршрутизатор и механизм розетки-маршрутизатора, предоставляемые Angular, будут управлять вами за вас.

Я сделал пример для stackbliz для Если вы хотите попробовать: https://stackblitz.com/edit/angular-3moc8g]

...