[英]login and logout with angular on the same page
i'm new with angular.我是角度的新手。 i'm making a login page but when i use the *ngIf directive it doesn't work as expected.
我正在制作一个登录页面,但是当我使用 *ngIf 指令时,它没有按预期工作。 login and logout links must disappear at change of the variable "logged".
登录和注销链接必须在变量“logged”更改时消失。 i used a login.service to store the "logged" status and the username.
我使用 login.service 来存储“登录”状态和用户名。
this is the code.这是代码。
app.component.html应用程序组件.html
<h1>{{ title }}</h1>
<nav>
<a routerLink="/posts"> Home </a>
<a *ngIf="!logged" routerLink="/login"> Login </a>
<a *ngIf="logged" routerLink="/posts" (click) = "logout()"> Logout</a>
</nav>
<router-outlet></router-outlet>
app.component.ts app.component.ts
import { Component} from '@angular/core';
import { LoginService } from './login.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My new Blog!';
constructor(private loginservice: LoginService){ }
logout(){
this.loginservice.logged = false;
this.loginservice.username ='';
}
}
login.component.html登录.component.html
<div>
<h1>Login</h1>
<input type="text" placeholder="Username*" #username>
<input type="text" placeholder="Password*" #password>
<button type="button" (click)="verify_userpass(username.value,password.value)">Submit</button>
<div>
<p>{{message}}</p>
</div>
</div>
login.component.ts登录.component.ts
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Location } from '@angular/common';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private loginservice: LoginService,private location: Location) { }
ngOnInit() {
}
message: string;
username: string = 'Admin';
password: string = 'admin';
verify_user(username,password){
if(username===this.username && password===this.password){
this.loginservice.username = username;
this.location.back();
this.loginservice.logged = true;
}
else{
this.message = 'Invalid credentials';
}
}
}
login.service.ts登录.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class LoginService {
username : string;
logged : boolean;
constructor() {
}
}
Your issue is that you are trying to access a variable from your app.component.html that does not exist in the AppComponent
class.您的问题是您试图从 app.component.html 访问
AppComponent
类中不存在的AppComponent
。
You need to expose your LoginService
so the UI can access it by changing the access scope and marking it as public
.您需要公开您的
LoginService
以便 UI 可以通过更改访问范围并将其标记为public
来访问它。
constructor(public loginService: LoginService){ }
You can then access it in the template like the following:然后,您可以在模板中访问它,如下所示:
<h1>{{ title }}</h1>
<nav>
<a routerLink="/posts"> Home </a>
<a *ngIf="!loginService.logged" routerLink="/login"> Login </a>
<a *ngIf="loginService.logged" routerLink="/posts" (click) = "logout()"> Logout</a>
</nav>
<router-outlet></router-outlet>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.