角9-着陆页路由[琐碎]
角9-着陆页路由[琐碎]
提问于 2020-04-14 18:38:45
我有一个简单的角度项目，有两个组成部分(应用程序和房间)。该应用程序组件充当一个登陆页面。它包含一个全屏视频和一个按钮，应该重定向到房间的组成部分。由于该网站不包含标题菜单，我不知道如何最好地实现路由。我的第一个想法是，每当我在房间组件上使用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
Stack Overflow用户
回答已采纳
发布于 2020-04-14 19:32:24
我认为您应该在一个单独的组件中移动您的登陆页面，例如，一个名为 landing 的组件，并将这个新组件与默认的路由‘相匹配；
const appRoutes: Routes = [
{
path: 'room',
component: RoomComponent
},
{
path: '',
component: LandingComponent,
pathMatch: 'full'
},
{
path: '**',
redirectTo: ''
}
];您的app.component.html只应该保持全局布局(nav菜单，如果您有，主要内容和最终页脚)和最重要的，路由器-出口。
<!-- 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路由匹配)，并将其插入路由器-oulet中，而不是以前的LandingComponent。
<p>
landing works!
</p>
<button [routerLink]="['/room']">Go to room</button>这样，你不需要再隐藏你的登陆页面，路由器和路由器出口机制提供的角将为你管理它。
如果您想尝试，我为您做了一个堆栈示例: https://stackblitz.com/edit/angular-3moc8g](https://stackblitz.com/edit/angular-3moc8g])
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61214868
复制相关文章
相似问题
腾讯云开发者
