Angular 9 - 着陆页路由 [琐碎]

Question

我有一个简单的 angular 项目，包含两个组件（应用程序和房间）。应用程序组件充当着陆页。它包含一个带有一个按钮的全屏视频，该按钮应该重定向到房间组件。由于该网站不包含 header-menu，我不确定如何最好地实施路由。我的第一个想法是，只要我在房间组件上，就用 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 { }

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”的按钮上使用路由器-link。当用户单击按钮时，路由将更改为 /room 并且路由器将加载 RoomComponent（与 /room 路由匹配）并将其插入路由器出口以代替之前的 LandingComponent。

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

这样，您就不需要再隐藏您的着陆页了，Angular 提供的路由器和路由器出口机制将为您管理。

如果你想尝试，我已经为你制作了一个 stackbliz 示例：https://stackblitz.com/edit/angular-3moc8g]

Angular 9 - 着陆页路由 [琐碎]

Angular 9 - Landing Page Routing [Trivial]

angular

angular-router