Прядильщик коврика не показан
Я хочу показать счетчик при обработке входа в систему.
login.component.ts:
constructor(public spinner: SpinnerComponent) { }
ngOnInit() {
this.spinner.showSpinner = false;
}
login() {
this.spinner.showSpinner = true;
this.userService.login(this.username, this.password).subscribe(loginResponse => {
...
this.spinner.showSpinner = false;
});
}
spinner.component.ts:
export class SpinnerComponent {
@Input()
showSpinner;
constructor() { }
}
spinner.component.html:
<div *ngIf = "showSpinner">
<mat-spinner [mode] = "indeterminate"></mat-spinner>
</div>
Кажется, что связь между компонентом входа в систему и компонентом счетчика для установки значения showSpinner неверна.
Есть идеи, как показать спиннер?
почему вы вводите компонент, как если бы это была служба? конструктор (публичный счетчик: SpinnerComponent)
Неправильно внедрять такой компонент, как этот конструктор (публичный счетчик: SpinnerComponent) {}
Ответы 3
Не используйте @Вход() со свойством showSpinner
просто создайте showspinner как логическое,
showSpinner: boolean;
Декоратор @Вход() означает, что вы передаете значение декоратором компонентов
login.component.ts
isWaiting: boolean = false;
constructor() {
}
ngOnInit() {
}
login() {
this.isWaiting = true;
this.userService.login(this.username,
this.password).subscribe(loginResponse => {
...
this.isWaiting = false;
});
}
в html
<mat-spinner *ngIf = "isWaiting" [mode] = "'indeterminate'">
</mat-spinner>
Вы просто добавляете компонент прядильщика для входа в html следующим образом
login.component.html
<app-spinner [showSpinner] = "showSpinner"></app-spinner>
login.component.ts:
public showSpinner:bollean=false;
ngOnInit() {
this.showSpinner = false;
}
login() {
this.showSpinner = true;
this.userService.login(this.username, this.password).subscribe(loginResponse => {
...
this.showSpinner = false;
});
}
Спасибо! Теперь работает. Так что мне нужно добавить прядильщик приложения в html всех компонентов, которые я хотел бы показать прядильщику? Есть ли другой способ добавить его в app.component.html?
да, вы можете создать службу и переключить состояние showSpinner из этой службы, я обновлю свой ответ и включу этот пункт @RAL
вы можете показать мне код login.component.html?