使用 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); } }}
在 Twitter 按鈕圖標旁邊顯示喜歡的數量
瀟湘沐
2023-08-10 15:57:40