ionic动态详情页模板

接上一篇
动态列表的详情页面效果：

上一篇博客中展示了很多的动态，这一片就说一下动态详情页面的实现，老规矩先贴上html代码：

  
    动态详情
  




  
    
      
    
    
{{item.nickName}}
    
{{item.date | date}}
  
  
  
{{item.content}}
  
    
      
        
        {{item.totalZan}} 赞
      
    
    
      
        
        {{item.totalComment}} 评论
      
    
    
      
        {{item.time}} ago
      
    
  
  


  
    评论区
    
      
        
      
      
{{item.nickName}}
      
{{item.comments}}
      {{item.time}}
      删除
    
  



  
    
      
      
      
    
  

紧接着就是页面的js代码，同样只是方法的代码：

ionViewDidLoad() {
    // 获取评论列表
    let $this = this;
    this.http.get("/api/news/comment/list", {newsId: this.item.id}, function (res, msg) {
      if (res.code === 0 && res.data) {
        $this.commentsList = res.data;
      }
    }, function (msg) {
    });
  }

  sendComment() {
    let $this = this;
    if (this.comment && this.comment !== "") {
      let data = {userId: this.currentUserId, newsId: this.item.id, comments: this.comment};
      this.http.post("/api/news/send/comment", data, function (res, msg) {
        if (res.code === 0) {
          $this.commentsList = res.data;
          $this.comment = "";
          $this.item.totalComment = $this.item.totalComment + 1
        } else {
        }
      }, function (msg) {
      })
    } else {
      return;
    }
  }
  // 点赞功能
  approvel() {
    let $this = this;
    this.http.get("/api/news/approvel", {"userId": this.currentUserId, "newsId": this.item.id}, function (res, msg) {
      if (res.code === 0 && res.data) {
        $this.item.totalZan = $this.item.totalZan + 1;
      } else if (res.code === 0) {
        $this.item.totalZan = $this.item.totalZan - 1;
      }
    }, function (msg) {
    });
  }

  /**
   * 删除评论
   */
  deleteComment(commentId: number) {
    let $this = this;
    this.http.post("/api/news/comment/delete", {id: commentId, newsId: this.item.id, userId: this.currentUserId}, function (res, msg) {
      if (res.code === 0) {
        $this.commentsList = res.data;
        $this.item.totalComment = $this.item.totalComment - 1
      }
    }, function (msg) {
    });
  }

  showConfirm(commentId: number) {
    let confirm = this.alertCtrl.create({
      title: '温馨提示',
      message: '是否要删除该评论?',
      buttons: [
        {
          text: '再看看',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: '是的',
          handler: () => {
            this.deleteComment(commentId);
          }
        }
      ]
    });
    confirm.present();
  }

第一个方法：ionViewDidLoad（），作用是页面被加载就去请求当前动态的所有评论
第二个方法：sendComment（），该方法就是发送评论的方法，页面最下方的小飞机按钮的点击方法，发送成功后就将输入框中的文字清楚，并将评论list重新渲染，然后评论数量加一
第三个方法：approvel（），点赞的方法，略，请看官参考上一篇博客
第四个方法：deleteComment（），删除评论的方法，如果不是自己评论的删除按钮是不会出现的，通过html中的 *ngIf=“currentUserId===item.userId” 来控制按钮的显示与隐藏

后面会更新购物车的页面以及个人中心以及首页
加油鸭！！！