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

Question

我有一个 angular 6 应用程序，用户可以在其中观看基于 his/her 订阅的电视频道视频。它被设计成有登录页面，url是http:///mytv/login。登录成功后，会进入播放器页面，用户可以在其中观看视频。有3个组件应用组件登录组件播放器组件应用程序组件有页眉和页脚，使用路由器出口登录和显示播放器组件。现在，客户想要观看来自 Amazon Fire TV 的视频，因此设计了一个新的登录页面，但它不应该有页眉和页脚。说新登录 url - 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>

布局。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>

优点：

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

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

How to create two login pages in angular application

angular

angular-ui-router