[英]Working with layouts in Angular2 app
I have developed an Angular2 app using routing. 我已经开发了使用路由的Angular2应用程序。
My problem scenario is: 我的问题场景是:
I have a Login page which has different HTML and CSS.Once successfully logged in, I redirect to another page which has different HTML and CSS. 我有一个具有不同HTML和CSS的登录页面。成功登录后,我将重定向到另一个具有不同HTML和CSS的页面。 But I have index.html(login page) as my main layout.
但是我将index.html(登录页面)作为主要布局。 Hence I need to understand how to work with multiple layouts?
因此,我需要了解如何使用多种布局?
I have done some R&D but I am not able to understand how to implement it? 我已经进行了一些研发,但是我不知道如何实现它?
Please find below code: 请找到以下代码:
1) app.routing.module 1)app.routing.module
import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'employee',
component: EmployeeComponent,
canActivate: [AuthGuard]
}];
export class AppRoutingModule { }
export const routedComponents = [LoginComponent,EmployeeComponent];
2) App component 2)App组件
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor() {
}
}
3) App module 3)App模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthGuard } from './guards/auth.guard';
@NgModule({
imports: [BrowserModule,
HttpModule,
AppRoutingModule
],
declarations: [AppComponent,
routedComponents
],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
4) Index.html 4)Index.html
<my-app>
</my-app>
Any help would be highly appreciable! 任何帮助将是非常可观的!
Thanks!! 谢谢!!
Create separate routes for login and home,place all other features routes inside home route as child route. 创建用于登录和归属的单独路由,将所有其他功能路由放置在归属路由内作为子路由。 Please find below code:
请找到以下代码:
{ path: 'login', component: LoginComponent }, { path: 'home', component: HomeComponent, children: [ { path: 'childPage', component: childPageComponent }] }
Use below line to navigate to child page: 在下面的行中导航到子页面:
this.router.navigate(['/home/childPage'])
Thanks!!! 谢谢!!!
Look at angular2 component styles 看一下angular2组件样式
As said in this reference: 如本参考资料中所述:
We have several ways to add styles to a component:
我们有几种向样式添加样式的方法:
- inline in the template HTML
内联在模板HTML中
- by setting styles
通过设置样式
- or styleUrls metadata with CSS imports
或带有CSS导入的styleUrls元数据
In addition I recommend you create components (and routings) like tree (Hierarchy) in one module. 另外,我建议您在一个模块中创建诸如树(层次结构)之类的组件(和路由)。 For checking user login status You need one shared service (for example authservice).
用于检查用户登录状态您需要一项共享服务(例如authservice)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.