使用 Angular 框架。我在瀏覽器中顯示了一個(gè)模擬 Twitter 按鈕的按鈕。現(xiàn)在我的點(diǎn)贊數(shù)在點(diǎn)擊時(shí)增加到 1,而在未點(diǎn)擊時(shí)又回到 0。然而,喜歡的數(shù)量正在控制臺(tái)中顯示。我想將其顯示在按鈕本身旁邊,這是否是將數(shù)據(jù)傳遞給事件問(wèn)題或 ngContent?前兩個(gè)片段是 app.component.html 和 app.component.ts,后兩個(gè)片段是 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 按鈕圖標(biāo)旁邊顯示喜歡的數(shù)量
瀟湘沐
2023-08-10 15:57:40