Angular 8：自定义 HTML 属性在组件内部不起作用 html

Question

我有一个 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>

在 app.js 文件中加载的 jQuery 代码在 angular.json

的脚本部分引用

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

使用 angular 路由加载组件如下：

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)
  }
];

即使是外部图片 url 也不起作用，我怀疑这与路由有关，但不知道到底是什么。

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

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

但这也不管用。

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

TIA。

Answer 1

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

我遇到的问题是 - 由于某些奇怪的原因，data-src 属性在组件加载时无法被 "sayit_js_bg_image" css class 识别。

为了克服，我必须在该组件的 .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 class 以在 .ts 文件中使用。

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

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

希望有人觉得它有用！

Angular 8：自定义 HTML 属性在组件内部不起作用 html

Angular 8: Custom HTML Attribute doesn't work inside component html

html

javascript

jquery

angular

angular8