我有一个'/'，当我点击按钮时，会向服务器发出http请求并重定向到this.router.navigateByUrl('/');。我使用router: Router routerLink执行此操作。我无法使用error，因为我向服务器发出请求，如果响应为'/'，则按钮不应重定向到'/'。当我重定向到DoCheck() angular应该向服务器发出请求时，我在组件的'/'中编写了这个逻辑，我没有找到另一种方法。当我重定向到DoCheck() OnInit()触发三次时，angular会向服务器发出三个请求，而不是一个。我尝试在OnChange()和'/'中编写逻辑，但在不起作用时，当我重定向到 ngDoCheck() {
if (this.isLogged === false) {
if (this.cookies.get('userHashCode')) {
let hash: Hash = {
name: this.cookies.get('userHashCode')
}
this.serverSide.getUserByHashCode('/getUserByHashCode', hash).subscribe(user => {
this.isLogged = true;
console.log(user);
}, error => console.log(error));
}
}
}
时，angular不会发出请求。可能是我做错了。请帮我。感谢
this.serverSide.reg('/reg', user).subscribe(data => {
console.log(data);
this.cookies.put('userHashCode', user.hash);
this.router.navigateByUrl('/');
}, error => console.log(error));
单击按钮时
serverSide.reg serverSide.getUserByHashCode和http.post只需提出'/regist'。
这是<div class="w-25 mx-auto">
<span class="text-danger text-center my-2">{{message}}</span>
<input #login type="text" class="form-control my-2" placeholder="Login">
<input #email type="email" class="form-control my-2" placeholder="Email">
<input #password type="password" class="form-control my-2" placeholder="Password">
<input #password2 type="password" class="form-control my-2" placeholder="Repeat password">
<input (click)="onRegist(login.value, email.value, password.value, password2.value)" type="button" class="my-2 float-right btn btn-outline-primary" value="To register">
</div>
onRegist(login: string, email: string, password: string, password2: string): void {
this.message = '';
if (this.checkLogin(login) && this.checkEmail(email) && this.checkPassword(password) && password === password2) {
let user: User = {
login: login,
email: email,
password: password,
hash: sha1(login + password).toString()
}
this.serverSide.reg('/reg', user).subscribe(data => {
console.log(data);
this.cookies.put('userHashCode', user.hash);
this.router.navigateByUrl('/');
}, error => console.log(error));
} else {
this.message = "incorrect inputs";
}
}
路径
'/' <div *ngIf="!isLogged" class="form-inline my-2 my-lg-0">
<button routerLink="/login" class="btn btn-outline-secondary my-2 my-sm-0 mx-2">Log in</button>
<button routerLink="/regist" class="btn btn-outline-secondary my-2 my-sm-0">Sign Up</button>
</div>
<div dropdown *ngIf="isLogged" class="form-inline my-2 my-lg-0 dropdown">
<button dropdownToggle class="btn btn-outline-secondary my-2 my-sm-0 mx-2 dropdown-toggle">{{login}}</button>
<ul *dropdownMenu class="dropdown-menu">
<li class="dropdown-item" routerLink="/settings">Settings</li>
<li class="dropdown-item">Account</li>
<li class="dropdown-item" (click)="logout()">Log out</li>
</ul>
</div>
import { Component } from '@angular/core';
import { CookieService } from "ngx-cookie";
import { Router } from '@angular/router';
import { ServerSideService } from './server-side.service';
import { Hash } from "./interfaces/hash";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLogged: boolean;
login: string;
constructor(
private cookies: CookieService,
private router: Router,
private serverSide: ServerSideService
) {}
ngOnInit() {
this.isLogged = false;
}
ngDoCheck() {
if (this.isLogged === false) {
if (this.cookies.get('userHashCode')) {
let hash: Hash = {
name: this.cookies.get('userHashCode')
}
this.serverSide.getUserByHashCode('/getUserByHashCode', hash).subscribe(user => {
this.isLogged = true;
console.log(user);
}, error => console.log(error));
}
}
}
getQuery(query: string): void {
if (query.length > 0) {
this.router.navigateByUrl(`/search/${query}`);
}
}
logout(): void {
this.cookies.removeAll();
this.router.navigateByUrl(`/`);
}
}
export class ServerSideService {
constructor(
private http: HttpClient
) { }
reg(url: string, user: User): Observable<any> {
return this.http.post(url, user);
}
getUserByHashCode(url: string, hash: Hash): Observable<any> {
return this.http.post(url, hash);
}
auth(url: string, user: User): Observable<any> {
return this.http.post(url, user);
}
}
const routes: Routes = [
{ path: '', component: HomePageComponent },
{ path: 'login', component: LogInComponent },
{ path: 'regist', component: RegistComponent },
{ path: 'settings', component: ProfileSettingsComponent },
{ path: 'search/:query', component: SearchListComponent }
]
路由
{{1}}