Angular: запретить пользователю нажимать кнопку более одного раза

Question

У меня есть маленькое приложение movieDB с firebase. Если вы выполните поиск по mov ie на домашней странице, вы увидите результаты, полученные из этого открытого API, и теперь вы находитесь на подробной странице с помощью маршрутизации. На этой странице вы можете отправлять отзывы в коллекцию в firebase, например, как mov ie (все в одном узле):

Мой выпуск : запретить пользователю один и тот же mov ie более одного раза. Пока у меня есть это:

Мне нравится Компонент HTML:

<button [disabled]="plus>1" (click)="increase()" class="btn btn-success">Like this Movie!</button>

Мне нравится TS:

export class LikeComponent implements OnInit {
  @Output() change=new EventEmitter()
  plus:number=1;
  constructor() { }

  ngOnInit() {
  }

increase(){

  this.change.emit({like:this.plus++})
}

Деталь HTML, где я получаю событие:

 <div class="col-md-6 form-group">
    <form [formGroup]="reviewForm" (ngSubmit)="submitReview()">
    <label for="review">Write your review!</label>
    <textarea class="form-control" rows="5" formControlName="review"></textarea>
    <button class="btn btn-success" [disabled]="reviewForm.invalid && likeable"  type="submit">Send review</button>
  </form>
  <app-like style="float:right" (change)="onChange($event)"></app-like>
  </div>

И TS:

export class DetailComponent implements OnInit {
  id: string;
  userReviews:any;
  userName:string;
  likes:any;
  constructor(
    private movieService: MoviesService,
    private route: ActivatedRoute,
    private fb: FormBuilder,
    private location: Location,
    private authService: AuthService,
    private afAuth: AngularFireAuth,
    private localService: LocalService  ) {

      this.afAuth.authState.subscribe(user => {
        this.userName = user.displayName;
      })

  }

  ngOnInit() {
    this.route.paramMap
      .pipe(
        switchMap(params => {
          this.id = params.get("title");
          return this.movieService.getMovies(this.id);
        })
      )
      .subscribe(data => {
        this.movie = data
        //etc
  }

reviews(){
  this.reviewForm= this.fb.group({
    review: ['', Validators.required]
  })
}
get userReview(){return this.reviewForm.get('review')}

onChange(event){
  this.likes=event
}

submitReview(){
  if(this.likes===undefined){ //->firebase doesnt accept undefined
    this.likes=null
  }
let credentials = {
  author: this.userName,
  review: this.userReview.value,
  movie: this.id,
  likes: this.likes
}


  this.movieService.createReview(credentials).then(data=>{
    console.log(data)
  }).catch(error=>{
    console.log(error)
  })
}

Итак, как вы можете видеть, кнопка LIKE доступна, только если переменная plus имеет более одного голоса. На самом деле это работает, но когда я переосмысливаю sh страницу или ухожу и возвращаюсь, кнопка снова становится доступной. Как я могу обойти это? Какие-нибудь мысли? Спасибо

РЕДАКТИРОВАТЬ (ответ основан на подсказке @JBoothUA)

Я произнес это так

export class LikeComponent implements OnInit {
  @Output() change=new EventEmitter()
  plus:number=1;
  local:any;
  constructor() { }

  ngOnInit() {
    this.local = JSON.parse(localStorage.getItem("plus"));
  }

increase(){
localStorage.setItem('plus', JSON.stringify( this.plus++))
  this.change.emit({like:this.plus++})
}

Но результатов нет. После обновления кнопка снова доступна. Что я делаю не так?

РЕДАКТИРОВАТЬ 2 @JBoothUA, @Rahul Tokase и @Shravan

Теперь все работает с этим кодом:

export class LikeComponent implements OnInit {
  @Output() change = new EventEmitter()
  plus: number = 1;
  constructor() { }
  ngOnInit() {
  this.plus = +localStorage.getItem('plus')

  }

  increase() {
    localStorage.setItem('plus',''+ ++this.plus)
    this.change.emit({ like: this.plus++ })
  }

Но теперь, хорошо, его Вполне логично, что теперь пользователь не может голосовать за любой другой фильм ie, так как у него есть только один голос на тысячи фильмов. Я предполагаю, что должен связать это с конкретным mov ie, за который он голосовал. Как я собираюсь достичь этого? Это правильный путь или все должно быть переделано?

Answer 1

У вас есть два следующих способа сделать это. 1) Иметь бэкэнд API, который даст статус «лайк», и в зависимости от статуса вы можете отключить кнопку «лайк». 2) Вы можете использовать LocalStorage или SessionStorage для сохранения состояния. 3) Используйте NgRx Store для хранения состояния.

Спасибо, Рахул

Answer 2

Я не думаю, что у Angular есть способ автоматически сохранять состояние во время обновления sh. Таким образом, вам нужно будет найти другой способ хранения переменной, так как Angular очистит ее память по ссылке sh.

Вы можете использовать что-то вроде DB или кеш Redis.

Я бы хотел сохранить это значение как локальное хранилище, хранилище сеансов или повар ie.

Пример:

let key = 'Item 1';
localStorage.setItem(key, 'Value');
let myItem = localStorage.getItem(key);

localStorage и sessionStorageccessli sh точно так же и имеют тот же API, но с sessionStorage данные сохраняются только до тех пор, пока окно или вкладка не будут закрыты, а с localStorage данные сохраняются до тех пор, пока пользователь вручную не очистит кэш браузера или пока ваше веб-приложение не очистит данные.