Angular 4.4能否绑定自定义HTML属性？jQuery DOM操作遇问题求助

我来帮你搞定这两个Angular相关的问题哈：

完全可以，但得用Angular正确的绑定姿势才行：

• 如果是自定义的普通HTML属性，记得加上attr.前缀，这样Angular才会把它当成原生HTML属性来处理，比如：

  <div [attr.commentId]="commentData.id" class="addReplyContainer" style="display: none" >
    <textarea ...></textarea>
  </div>
  

  要是不加attr.，Angular会误以为你要绑定到组件/指令的输入属性，大概率会导致属性没法正确渲染到DOM上哦。
• 另外，更推荐符合HTML5规范的data-*属性，比如data-comment-id，绑定方式也差不多：

  <div [data-comment-id]="commentData.id" class="addReplyContainer" style="display: none" >
    <textarea ...></textarea>
  </div>
  

  这种方式兼容性更好，也更符合标准写法~

咱们先分析下你当前代码可能存在的问题，再给出解决方案：

问题根源 #

1. 自定义属性绑定不规范：你用了插值{{commentData.id}}，虽然能渲染，但不如用[attr.commentId]绑定靠谱（参考问题1的方法），这可能导致属性没正确出现在DOM里，jQuery自然找不到元素。
2. jQuery选择器的引号问题：如果commentId是数字或者包含特殊字符，直接写div[commentId='+commentId+']会让选择器失效，得给属性值加上引号才行。
3. Angular里尽量别直接操作DOM：Angular本身有一套视图控制机制，用jQuery直接改DOM容易和Angular的变更检测冲突，反而容易出问题。

解决方案 #

方案一：用Angular原生方式（推荐）

咱们用*ngIf来控制div的显示，比jQuery优雅多了：

• 组件里维护一个对象，用来记录每个commentId对应的显示状态：

  showReplyMap: {[key: number]: boolean} = {};
  
  addReply(event, commentId) {
    console.log(commentId);
    // 设置对应commentId的div显示
    this.showReplyMap[commentId] = true;
  }
  

• 模板里改成用*ngIf控制显示，同时规范属性绑定：

  <div [attr.commentId]="commentData.id" class="addReplyContainer" *ngIf="showReplyMap[commentData.id]" >
    <textarea style="width:50%" class="addReplyTextarea form-control"></textarea>
  </div>
  

方案二：坚持用jQuery的修正版

如果一定要用jQuery，那按下面的步骤改：

1. 先把模板里的属性绑定改成规范的写法：

   <div [attr.commentId]="commentData.id" class="addReplyContainer" style="display: none" >
     <textarea ...></textarea>
   </div>
   

2. 修正jQuery选择器，给属性值加上双引号：

   addReply(event, commentId) {
     console.log(commentId);
     jQuery('div[commentId="' + commentId + '"]').show();
   }
   

3. 确保jQuery已经正确引入项目：如果是用npm安装的，记得在组件里import * as $ from 'jquery'，或者在angular配置文件里添加jQuery的脚本路径。

内容的提问来源于stack exchange，提问作者hkaur13