Angular 8：自定义HTML属性在组件HTML内无法生效

你遇到的核心问题很明确：jQuery代码的执行时机和组件DOM渲染的时机不匹配。

你的app.js是在页面初始加载时就运行了，但懒加载的组件（比如PostModule）是在用户导航到对应路由后才会渲染其DOM结构。这时候jQuery已经执行完了，自然找不到组件里的.sayit_js_bg_image元素，所以设置背景图的逻辑根本没触发。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用Angular原生方式替代jQuery（最推荐） #

Angular本身提供了完善的DOM样式绑定能力，完全不需要依赖jQuery，这样既符合框架最佳实践，也能彻底避免时机问题。

静态路径写法 #

直接在模板里用[style.background-image]绑定：

<div class="sayit_js_bg_image" 
     [style.background-image]="'url(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>

动态路径写法 #

如果图片路径是从组件逻辑里获取的（比如从接口返回），可以先在组件类里定义变量：

// 组件类（比如PostComponent）
import { Component } from '@angular/core';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent {
  // 可以是静态值，也可以是从服务/接口获取的动态值
  bgImageUrl = 'assets/imgs/clipart/standard_post/back-1.jpg';
}

然后在模板里绑定：

<div class="sayit_js_bg_image" 
     [style.background-image]="'url(' + bgImageUrl + ')'">
    <!-- 内部内容不变 -->
</div>

方案2：把jQuery逻辑移到组件的生命周期钩子中 #

如果你一定要保留jQuery的写法，那得确保代码在组件DOM渲染完成后再执行。Angular的ngAfterViewInit钩子就是干这个的——它会在组件及其子组件的DOM完全渲染好后触发。

在你的懒加载组件（比如PostComponent）里添加如下代码：

import { Component, AfterViewInit } from '@angular/core';

// 声明jQuery，避免TypeScript类型报错
declare var jQuery: any;

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 这里执行jQuery逻辑，此时组件DOM已经存在
    const bgImages = jQuery('.sayit_js_bg_image');
    if (bgImages.length > 0) {
      bgImages.each(function() {
        jQuery(this).css('background-image', `url(${jQuery(this).attr('data-src')})`);
      });
    }
  }
}

方案3：全局监听路由导航事件（适合多个组件需要该逻辑的场景） #

如果很多懒加载组件都需要这个背景图设置逻辑，你可以在AppComponent里监听路由导航完成事件，每次路由切换后重新执行jQuery代码：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

declare var jQuery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {
    // 监听路由导航结束事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 每次路由切换完成后，重新执行背景图设置逻辑
      const bgImages = jQuery('.sayit_js_bg_image');
      if (bgImages.length > 0) {
        bgImages.each(function() {
          jQuery(this).css('background-image', `url(${jQuery(this).attr('data-src')})`);
        });
      }
    });
  }
}

为什么你之前的尝试没用？ #

你写的[attr.data]="data-src"是错误的语法：

• Angular里绑定自定义属性应该用[attr.data-src]="变量名"，但其实你根本不需要绑定，直接写data-src="xxx"在模板里是完全有效的。
• 问题的核心从来不是属性本身，而是jQuery代码执行时，组件的DOM还没被渲染出来，所以找不到元素。

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