分裂login.component与app.component
我试图创建一个与主应用程序布局非常不同的登录页面，因此我尝试将login.component与app.component分开，我还使用body class属性来设置body元素的class属性，我也希望听到任何处理这个问题的经验，并说我的方式是错误的或好的。
这里我的index.html、login.component.ts和app.component.ts文件是什么样子的；
login.component.ts
import { Component } from '@angular/core';
import {Auth} from '../auth/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: [
'../../assets/css/colors/cyan.css'
]
})
export class LoginComponent {
bodyclass = 'body-login-class';
constructor(private auth:Auth){}
}app.component.ts
import { Component } from '@angular/core';
import {Auth} from './auth/auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css',
'assets/css/colors/default.css',
...
]
})
export class AppComponent {
bodyclass = 'body-general-class';
constructor(private auth:Auth){}
}index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngTs19December</title>
<base href="/">
<script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script>
</head>
<body [class]="bodyclass">
<app-root>Loading...</app-root>
<app-login></app-login>
<!-- Global Plugin JavaScript -->
...
</body>
</html>我从来没有遇到过像使用这样的例子
app-root和app-登录
在同一个文件里，所以它困扰我..。无论如何，这是我在运行这个程序时所面临的错误。
最后，routes.ts登录页必须是欢迎用户的页面，总是将其注册在
import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './auth/auth.guard';
import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';
const appRoutes: Routes=[
{
path:'home',
component:HomeComponent,
canActivate:[AuthGuard]
},
{
path:'',
component:LoginComponent
}
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);回答 1
Stack Overflow用户
发布于 2016-12-19 22:31:00
<app-root></app-root>和<app-login></app-login>不能同时出现在索引页面上。
更改app.component.ts文件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent { }最重要的部分是<router-outlet></router-outlet。
在索引文件中，删除<app-login></app-login>
根据您的路由，假设您使用localhost:3000，是用户导航到localhost:3000时显示的登录页面(LoginComponent)。从这里，如果凭据正确，您可以将用户路由到HomeComponent。
https://stackoverflow.com/questions/41231176
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号