在 Twitter 按钮图标旁边显示喜欢的数量

Question

使用 Angular 框架。我在浏览器中显示了一个模拟 Twitter 按钮的按钮。现在我的点赞数在点击时增加到 1，而在未点击时又回到 0。然而，喜欢的数量正在控制台中显示。我想将其显示在按钮本身旁边，这是否是将数据传递给事件问题或 ngContent？前两个片段是 app.component.html 和 app.component.ts，后两个片段是 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);

        }   

  }

}

Answer 1

您可以使用{{}}-brackets 显示喜欢的数量，它应该会自动更新。这称为插值，是 Angular 的核心功能之一。{{likesAmount}} <span class="glyphicon"      [class.glyphicon-heart-empty]="!isActive"      [class.glyphicon-heart]="isActive"     (click)="changeFavorite()"></span>