时间戳

首页 > 解决方案 > Angular 8：自定义 HTML 属性在组件 html 中不起作用

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

问题描述

我有一个 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 元素中使用上述图像路径，它可以工作，所以我认为路径引用不是问题。

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

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。

标签： javascriptjqueryhtmlangularangular8

解决方案

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

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

为了克服，我必须在该组件的 .ts 文件中明确设置 css 属性“背景图像”。

<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 的背景设置为传递的图像。

希望有人觉得它有帮助！

推荐阅读