Angular 8：自定义 HTML 属性在组件 html 中不起作用答案

【问题标题】：Angular 8: Custom HTML Attribute doesn't work inside component htmlAngular 8：自定义 HTML 属性在组件 html 中不起作用
【发布时间】：2019-11-10 16:06:47
【问题描述】：

我有一个 Angular 8 应用程序，我在 html 中使用自定义 html 属性，后来使用 jQuery 检索这些属性以设置 div 和其他 dom 元素的背景图像、高度等。

自定义属性代码如下：

var sayit_js_bg_image = jQuery('.sayit_js_bg_image');

if (jQuery(sayit_js_bg_image).length > 0) {
        jQuery(sayit_js_bg_image).each(function () {
            jQuery(this).css('background-image', 'url(' + jQuery(this).attr('data-src') + ')');
        });
    }

<div class="sayit_js_bg_image" data-src="assets/imgs/clipart/standard_post/back-1.jpg">
  
  <div class="sayit_overlay sayit_fimage_overlay_type_light"></div>

  <div class="sayit_title_wrapper col push-middle">
    <div class="sayit_post_category_cont">
      <a href="#">Germany</a>
      <span class="sayit_post_date">July 10, 2018</span>
    </div>

    <h1 class="sayit_post_title">Some text</h1>
  </div>
</div>

在 angular.json 的 scripts 部分引用的 app.js 文件中加载的 jQuery 代码

这段代码在 index.html 中运行良好，但是当我将它移到任何组件中时它就不起作用了。仅供参考 - 如果我在 img 元素中使用上述图像路径，它可以工作，所以我认为路径引用不是问题。

使用角度路由加载组件，如下所示：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  },
  {
    path: 'advertise',
    loadChildren: () => import('./advertise/advertise.module').then(m => m.AdvertiseModule)
  },
  {
    path: 'post',
    loadChildren: () => import('./post/post.module').then(m => m.PostModule)
  }
];

即使外部图片网址也不起作用，我怀疑这与路由有关，但无法弄清楚这到底是什么。

我关注了一篇文章，并遵循了一个建议的解决方案：

data-src="assets/imgs/clipart/standard_post/back-1.jpg" [attr.data]="data-src"

但这也不起作用。

我很困惑我做错了什么。在这里感谢任何帮助。

TIA。

【问题讨论】：

我建议使用 data binding 设置属性和属性，而不是使用 jQuery 强制设置。
jQuery 不属于 Angular 应用程序。
^ 那不是真正的伙伴。 jQuery 在 angular.json 下作为包从外部加载。
没有理由在 Angular 8 中使用 jquery

标签： javascript jquery html angular angular8

【解决方案1】：

如果有人遇到类似情况，我会回答我的问题。

我的问题是——由于某些奇怪的原因，组件加载时“sayit_js_bg_image”css 类无法识别 data-src 属性。

为了克服，我必须在该组件的 .ts 文件中显式设置 css 属性“background-image”。

<div class="sayit_title_container row sayit_js_height sayit_block_with_fimage" [attr.data-src]="assets/imgs/clipart/standard_post/back-1.jpg">
  //Other elements
</div>

声明了一个名为“sayit_title_container”的 css 类以在 .ts 文件中使用。

ngAfterViewInit() {
    $(".sayit_title_container").each(function () {
      $(this).css('background-image', 'url(' + $(this).attr('data-src') + ')');
    });
  }

在 ngAfterViewInit 内部将 div 的背景设置为传递的图像。

希望有人觉得它有帮助！

【讨论】：