在 twitter 按钮图标旁边显示点赞数答案

【问题标题】：Display number of likes next to twitter button icon在 twitter 按钮图标旁边显示点赞数
【发布时间】：2020-11-17 21:47:01
【问题描述】：

使用 Angular 框架。我在浏览器中显示了一个模拟 twitter 按钮的按钮。现在我的点赞数在点击时上升到 1，在未点击时又回到 0。但是，喜欢的数字正在控制台中显示。我想将它显示在按钮本身旁边，这是将数据传递给事件问题还是 ngContent？前两个sn-ps是app.component.html和app.component.ts，后两个sn-ps是like.component.html和like.component.ts。

<like [isActive]="tweet.isLiked" [likesAmount] = "tweet.likesCount"(change)="tweet.onFavoriteChange()"></like>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'twitterButton';
  
  //Tweet object
  tweet = {
    body: 'Here is the body of a tweet...',
    isLiked: false,
    likesCount: 0,
    onFavoriteChange(){}
  }
}

<span class="glyphicon" 
[class.glyphicon-heart-empty] = "!isActive" 
[class.glyphicon-heart]="isActive" (click)="changeFavorite()"></span>

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'like',
  templateUrl: './like.component.html',
  styleUrls: ['./like.component.css']
})
export class LikeComponent {
  @Input() likesAmount: number; //Total number of likes
  @Input() isActive: boolean; //User has liked tweet or not
  @Output() change = new EventEmitter();
  
  changeFavorite(){
    this.isActive = !this.isActive;
    this.change.emit();
    if(this.isActive){
          this.likesAmount++;
          console.log(this.likesAmount);
        }else{
          this.likesAmount--;
          console.log(this.likesAmount);
        }   
  }
}

【问题讨论】：

标签： javascript html angular forms

【解决方案1】：

您可以使用{{}}-brackets 来显示点赞数，它应该会自动更新。这称为interpolation，是 Angular 的核心功能之一。

{{likesAmount}}
<span class="glyphicon" 
    [class.glyphicon-heart-empty]="!isActive" 
    [class.glyphicon-heart]="isActive"
    (click)="changeFavorite()"></span>

【讨论】：