如何在angular应用程序中创建两个登录页面

Question

我有一个angular 6应用程序，用户可以在其中根据自己的订阅观看电视频道的视频。它被设计为具有登录页面，url为http://mytv/login.成功登录后，它会转到播放器页面，用户可以在那里观看视频。共有3个组件应用程序组件登录组件播放器组件应用程序组件有页眉和页脚，使用路由器出口登录并显示播放器组件。现在，客户想从亚马逊消防电视观看视频，所以设计了一个新的登录页面，但不应该有页眉和页脚。说出新登录网址-http://mytv/firetv_login.点击此按钮后，我创建了一个本地存储来指示fire tv登录。由于此组件将在应用程序组件之后加载，我无法使用ngIf隐藏页眉和页脚。有更好的方法吗？

Answer 1

假设app-component可能是您的主要组件，并且可能是这样的：

app-component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

你的路线可能是这样的：

const routes = [
{path: 'login', component: LoginComponent},
{path: 'player', component: PlayerComponent},
{path: 'firetv', component: FireTVComponent},
]

一个非常简单的方法是在app-component中使用切换，可能连接到路由器事件并切换头&页脚。这当然是一个简单的方法，没有太多变化。

---

有一种更结构化的方式来利用路线(涉及更多的更改(：

更改将需要包装一个布局组件，您需要2个布局组件：

blank-layout.component.html(这是没有页眉和页脚的视图的根组件(

<router-outlet></router-outlet>

layout.component.html(这是具有页眉和页脚的视图的根组件(

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

你的路线会像下面的

const routes = [
{path: 'firetv_login', component: BlankLayoutComponent, children:[
{path: '', component: FireTVLoginComponent}
]},
{path: '', component: LayoutComponent, children:[
{path: 'login', component: LoginComponent},
{path: 'player', component: PlayerComponent}
]},
]

您的AppComponent将只是<router-outlet></router-outlet>

优点：

• 您不必处理切换布局、管理状态，如果头&页脚是隐藏的，以及何时隐藏它。这样，您可以定义布局，路由决定页眉和页脚是否是隐藏的；页脚应该可见
• 这是一种更结构化的方式，您可以修改路线以添加更多页面
• 您可以添加更多布局，例如，一个有页眉但没有页脚的页面