Java Angular2在仪表板上显示用户名和详细信息
我正在学习angular2/4,并试图创建一个带有用户名和密码的登录页面。我有两个组件LoginComponent和DashboardComponent。当用户输入用户名和密码时,仪表板应显示欢迎用户名消息(例如“欢迎ABC”)。我能够创建登录页面,但不确定如何处理问题的第二部分,即仪表板应该向我显示登录的用户。我遵循了下面的stackoverflow“”,但没能从中获得什么。下面是我的代码。任何普朗克的例子都是值得赞赏的。我也查看了,但它将登录详细信息存储在本地存储中并从那里获取。是否有其他方法可以在登录时获取用户名。提前谢谢。代码如下 auth.service.tsJava Angular2在仪表板上显示用户名和详细信息,java,angular,typescript,angular2-forms,angular2-services,Java,Angular,Typescript,Angular2 Forms,Angular2 Services,我正在学习angular2/4,并试图创建一个带有用户名和密码的登录页面。我有两个组件LoginComponent和DashboardComponent。当用户输入用户名和密码时,仪表板应显示欢迎用户名消息(例如“欢迎ABC”)。我能够创建登录页面,但不确定如何处理问题的第二部分,即仪表板应该向我显示登录的用户。我遵循了下面的stackoverflow“”,但没能从中获得什么。下面是我的代码。任何普朗克的例子都是值得赞赏的。我也查看了,但它将登录详细信息存储在本地存储中并从那里获取。是否有其他方
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';
import {Http, Headers, Response} from '@angular/http';
import 'rxjs/add/operator/map'
import { User } from "app/demo/domain/user";
@Injectable()
export class AuthService {
loginObject :User
isLoggedIn: boolean = false;
redirectUrl: string;
constructor(private http: Http) { }
login(username : string, password : string) {
this.loginObject ={username: username, password: password};
return this.http.post('http://localhost:8080/ui/api/login/'+username, this.loginObject)
.map((response: Response) => {
let user = response.json();
if (user) {
logged in between page refreshes
this.isLoggedIn = true;
localStorage.setItem('currentUser', JSON.stringify(user));
}
});
}
logout(): void {
this.isLoggedIn = false;
}
}
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from "app/demo/service/auth.service";
@Component({
selector: 'login',
templateUrl: 'login.component.html',
})
export class LoginComponent {
message: string;
user: any = {};
constructor(public authService: AuthService, public router: Router) {}
login() {
this.authService.login(this.user.username,
this.user.password).subscribe(data => {
console.log(this.user.username);
// this.setMessage();
if (this.authService.isLoggedIn) {
// Get the redirect URL from our auth service
// If no redirect has been set, use the default
this.authService.redirectUrl = '/dashboard';
let redirect = this.authService.redirectUrl ?
this.authService.redirectUrl : '';
// Redirect the user
this.router.navigate([redirect]);
}
},
error => {
this.message ="Error: Username or password is incorrect";
});
}
logout() {
this.authService.logout();
this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
this.router.navigate(['/login']);
}
}
login.component.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';
import {Http, Headers, Response} from '@angular/http';
import 'rxjs/add/operator/map'
import { User } from "app/demo/domain/user";
@Injectable()
export class AuthService {
loginObject :User
isLoggedIn: boolean = false;
redirectUrl: string;
constructor(private http: Http) { }
login(username : string, password : string) {
this.loginObject ={username: username, password: password};
return this.http.post('http://localhost:8080/ui/api/login/'+username, this.loginObject)
.map((response: Response) => {
let user = response.json();
if (user) {
logged in between page refreshes
this.isLoggedIn = true;
localStorage.setItem('currentUser', JSON.stringify(user));
}
});
}
logout(): void {
this.isLoggedIn = false;
}
}
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from "app/demo/service/auth.service";
@Component({
selector: 'login',
templateUrl: 'login.component.html',
})
export class LoginComponent {
message: string;
user: any = {};
constructor(public authService: AuthService, public router: Router) {}
login() {
this.authService.login(this.user.username,
this.user.password).subscribe(data => {
console.log(this.user.username);
// this.setMessage();
if (this.authService.isLoggedIn) {
// Get the redirect URL from our auth service
// If no redirect has been set, use the default
this.authService.redirectUrl = '/dashboard';
let redirect = this.authService.redirectUrl ?
this.authService.redirectUrl : '';
// Redirect the user
this.router.navigate([redirect]);
}
},
error => {
this.message ="Error: Username or password is incorrect";
});
}
logout() {
this.authService.logout();
this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
this.router.navigate(['/login']);
}
}
login.component.html
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>PrimeNG - ATLANTIS</title>
<!-- Layout CSS -->
<link rel="stylesheet" type="text/css" href="assets/theme/theme-blue.css">
<link rel="stylesheet" type="text/css" href="assets/layout/css/layout-
blue.css">
<link rel="stylesheet" type="text/css" href="assets/pages/primeng.min.css">
<!-- Ripple -->
<script src="jquery.js"></script>
</head>
<!-- 3. Display the application -->
<body class="login-body">
<div class="login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12 logo-container">
<h1>Login to Your Account</h1>
<h2>WELCOME TO SKYCREEK</h2>
</div>
<p style="color: #ff0000;">{{message}}</p>
<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm"
novalidate>
<div class="ui-g-12" [ngClass]="{ 'has-error': f.submitted &&
!username.valid }">
<input type="text" autocomplete="off" class="ui-inputtext ui-
corner-all ui-state-default ui-widget" name="username"
[(ngModel)]="user.username" #username="ngModel" placeholder="Username"
required />
<div *ngIf="f.submitted && !username.valid" class="help-block"
style="color: #ff0000;">Username is required</div>
</div>
<div class="ui-g-12" [ngClass]="{ 'has-error': f.submitted &&
!password.valid }">
<input type="password" autocomplete="off" class="ui-inputtext
ui-corner-all ui-state-default ui-widget" name="password"
[(ngModel)]="user.password" #password="ngModel" placeholder="Password"
required />
<div *ngIf="f.submitted && !password.valid" class="help-block"
style="color: #ff0000;">Password is required</div>
</div>
<div class="ui-g-12 button-container">
<button class="ui-button green-btn ui-widget ui-state-default
ui-corner-all ui-button-text-icon-left">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
文件。写(“”);
普雷明-亚特兰蒂斯
登录到您的帐户
欢迎来到天溪
{{{message}
用户名是必需的
密码是必需的
登录
基本上,您需要学习组件之间的通信。有多种方法可以通过此链接完成此签出@赫伦帕雷赫。谢谢你的回复。我给了@Input('user')用户名:String;并在dashboard.html中提供{{user}}。但是它不会显示任何东西为什么在组件中有html标记等?它们只属于索引文件