#angular #antd #ng-zorro-antd
Вопрос:
Именно так изначально загружается мое приложение.
И вот что происходит, когда я навожу курсор на некоторые пункты меню, они загружаются сразу
Вот как я прокладываю маршрут:
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/login' },
{ path: 'welcome', component:WelcomeComponent, canActivate:[urlGuard] },
{ path: 'login', component:LoginComponent }
];
Мое приложение.модуль:
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports[//I'll leave this empty cuz there are a lot of imports],
bootstrap: [AppComponent, LoginComponent]
Компонент входа в систему-это тот, который загружается неправильно (в основном форма входа в систему). Спасибо
ИЗМЕНИТЬ: Это мой логин.компонент.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import axiosInstance from '../../axiosApi';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username?: string;
password?: string;
ngOnInit() {}
validateForm = new FormGroup({
userName: new FormControl(''),
password: new FormControl('')
})
submitForm(){
try {
axiosInstance
.post("/api/token/obtain/", {
username: this.username,
password: this.password,
})
.then((response) => {
axiosInstance.defaults.headers["Authorization"] =
"JWT " response.data.access;
localStorage.setItem("access_token", response.data.access);
localStorage.setItem("refresh_token", response.data.refresh);
sessionStorage.setItem("isAuth", 'true')
})
.catch((error) => {
console.log("login error", error);
});
} catch (error) {
throw error;
}
}
}
Это мое login.component.html:
<nz-content>
<div class="inner-content">
<form nz-form [formGroup]="validateForm" class="login-form inner-content" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group nzPrefixIcon="user">
<input type="text" nz-input formControlName="userName" [(ngModel)]='username' placeholder="Username" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Password!">
<nz-input-group nzPrefixIcon="lock">
<input type="password" nz-input [(ngModel)]='password' formControlName="password" placeholder="Password" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<div nz-row class="login-form-margin">
<div nz-col [nzSpan]="12">
<label nz-checkbox formControlName="remember">
<span>Remember me</span>
</label>
</div>
<div nz-col [nzSpan]="12">
<a class="login-form-forgot">Forgot password</a>
</div>
</div>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'" type="submit">Log in</button>
Or <a> register now! </a>
</form>
</div>
</nz-content>
<style>
.login-form {
max-width: 300px;
margin:auto;
}
.login-form-margin {
margin-bottom: 16px;
}
.login-form-forgot {
float: right;
}
.login-form-button {
width: 100%;
}
</style>
Комментарии:
1. не могли бы вы, пожалуйста, предоставить код компонента входа?
2. @Andrei Я сделал, хотя я не уверен, имеет ли это какое-либо отношение к самому компоненту
3. похоже, что сам компонент загружен(учитывая, что у вас есть «Запомни меня» и другие присутствующие элементы). для меня это похоже на некоторые ошибки в библиотеке компонентов ant
4. @Andrei Я не говорю, что вы ошибаетесь, потому что я не знаю, что происходит с этой ошибкой, но когда все было только в одном компоненте (компонента входа в систему не существовало, форма входа была в компоненте приложения вместе с этим меню) У меня не было этой проблемы.