Как изменить представления между двумя компонентами в Angular?

Question

Проблема: мне нужно добавить новый компонент Review в модуль, состоящий из одного другого компонента, и переключаться между двумя представлениями компонентов.

---

Используя пример приложения базы данных mov ie. В проекте Angular root app.component.html загружает все виды с <router-outlet>. Есть папка «modules» и внутри нее папка «mov ie» с movie.module.ts и файлом маршрутизации. В модуле есть компонент mov ie, который отображает информацию о mov ie, и необходимо добавить компонент review , где вы можете просмотреть mov ie. В movie.component.html созданы две кнопки: О (по умолчанию go до movie.component.html) и Просмотр (* go до review.component.html). Мне нужно переключаться между этими двумя компонентами с маршрутом по умолчанию movie.component.html. Подобно вкладке, где вы переключаетесь между контентом. URL mov ie будет / mov ie, а URL обзора / movie / review .

Единственный способ, которым я могу придумать, - это добавить третий «родительский» компонент, который будет действовать как маршрут компонента по умолчанию mov ie и в котором оба вида загружаются внутри, используя <router-outlet>. Но возможно ли это сделать без добавления третьего компонента?

Пример макета

mov ie .component. html из mov ie module

<div class="Hero">
    <!-- This belongs to movie component -->
    <img src="hero-img">
</div>

<button routerLink="">ABOUT</button>
<button routerLink="/review">REVIEW</button>

<div>
    <h1>Movie information here</h1>
</div>

review.component. html mov ie module

<!-- The Hero image should appear here -->
<!-- The buttons to navigate between views -->

<div>
    <h1>Review section with comments here</h1>
</div>

mov ie -routing.module.ts модуля mov ie

const routes: Routes = [
  {
    path: 'movie',
    component: MovieComponent
  }
];

app-routing .module.ts из root module

По умолчанию / mov ie путь загружает mov ie компонент

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('src/app/modules/movie/movie.module').then(m => m.MovieModule)
  }
];