[英]How to load a create a login page
i created the following template for the main component of my Angular2 app: 我为Angular2应用程序的主要组件创建了以下模板:
<header>
<topbar></topbar>
</header>
<div class="middle">
<sidebar></sidebar>
<main>
<router-outlet></router-outlet>
</main>
</div>
<footer></footer>
As you can see i put my Angular router
within the template, under the main
tag. 正如您所看到的,我将Angular
router
放在main
标签下的模板中。
Here is my app.routing.ts
file: 这是我的
app.routing.ts
文件:
import {Routes, RouterModule} from '@angular/router';
import {Page1Component} from './components/page1/page1.component';
import {Page2Component} from './components/page2/page2.component';
import {Page3Component} from './components/page3/page3.component';
import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component';
const appRoutes: Routes = [
{ path: '', component: Page1Component },
{ path: 'page2', component: Page2Component },
{ path: 'page3', component: Page3Component },
{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);
Now i want to add a LoginComponent
that make guest users (= users not logged to the app) not to see the app sections and contents. 现在我想添加一个
LoginComponent
,使访客用户(=未登录到应用程序的用户)不会看到应用程序部分和内容。 So the login component should load a page instead of previous template. 因此,登录组件应该加载页面而不是以前的模板。 For example its template could be the following:
例如,其模板可能如下:
<header></header>
<div class="welcome">
<login></login>
</div>
<footer></footer>
So, how to add it to my routing system and prevent to load other components such as the sidebar, topbar and so on? 那么,如何将它添加到我的路由系统并防止加载其他组件,如侧边栏,顶部栏等?
Your entry should look like this: 您的参赛作品应如下所示:
<router-outlet></router-outlet>
<footer></footer>
And then the login-component is loaded or you main-component which contains all the users should see.. 然后加载登录组件或者包含所有用户应该看到的main-component。
or store the users state in a variable and do something like this: 或者将用户状态存储在变量中并执行以下操作:
<header>
<topbar *ngIf="userIsLoggedIn"></topbar>
</header>
<div class="middle">
<sidebar *ngIf="userIsLoggedIn"></sidebar>
<main>
<router-outlet></router-outlet>
</main>
</div>
<footer></footer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.