Angular 9-着陆页路由[相对位置]

Question

我有一个简单的角度项目，包含两个组件（应用程序和房间）。该应用程序组件充当着陆页。它包含一个带有一个按钮的全屏视频，应将其重定向到房间组件。由于该网站不包含标题菜单，因此我不确定如何最好地实现路由。我的第一个想法是，只要在房间组件上用im [隐藏登录页面，但这不是最好的方法。谢谢您提供更好的建议。

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 { }

Answer 1

我认为您应该将着陆页移动到单独的组件中，例如，名为

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”为目标的路由器链接。当用户单击按钮时，路由将更改为/ room，路由器将加载RoomComponent（与/ room路由匹配），并将其插入到路由器出口中，以代替先前的LandingComponent。
<p>
landing works!
</p>
<button [routerLink]="['/room']">Go to room</button>

这样，您就不再需要隐藏目标网页，Angular提供的路由器和路由器插座机制将为您管理它。
如果您想尝试，我为您提供了一个stackbliz示例：https://stackblitz.com/edit/angular-3moc8g]