求助：子组件中[innerHTML]绑定值无法展示的问题

先从几个核心点入手，一步步排查解决：

1. 子组件未正确获取数据 #

你子组件模板里用了legalContent.disclaimer，但父组件是把接口返回数据存在了legalService.legalInfo里——子组件得先从服务里拿到这个数据才行：

// contact-us.component.ts
import { Component, OnInit } from '@angular/core';
import { LegalService } from '你的服务路径';

@Component({
  selector: 'app-contact-us',
  templateUrl: './contact-us.component.html'
})
export class ContactUsComponent implements OnInit {
  legalContent: any;

  constructor(private legalService: LegalService) {}

  ngOnInit(): void {
    // 先尝试直接获取服务中缓存的数据
    this.legalContent = this.legalService.legalInfo;
  }
}

2. 异步数据的时序问题 #

父组件的getLegalContent是异步方法，子组件可能在接口数据还没返回时就完成初始化了，这时候服务里的legalInfo还是空值。

这种情况可以用BehaviorSubject让服务能通知子组件数据更新：

// legal.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class LegalService {
  private legalInfoSubject = new BehaviorSubject<any>(null);
  legalInfo$ = this.legalInfoSubject.asObservable();

  constructor(private http: HttpClient) {}

  getLegaPages() {
    // 替换成你的实际接口请求
    return this.http.get('你的接口地址');
  }

  setLegalInfo(data: any) {
    this.legalInfoSubject.next(data);
  }
}

父组件调用接口后，通过setLegalInfo更新服务中的数据：

// contact.ts
async getLegalContent() {
  try {
    const legalData = await this.legalService.getLegaPages().toPromise();
    this.legalService.setLegalInfo(legalData);
  } catch (err) {
    console.error('获取法律内容失败:', err);
  }
}

子组件订阅数据变化，数据返回时会自动更新：

// contact-us.component.ts
ngOnInit(): void {
  this.legalService.legalInfo$.subscribe(data => {
    if (data) {
      this.legalContent = data;
    }
  });
}

3. Angular安全机制拦截HTML内容 #

Angular的[innerHTML]默认会过滤它认为不安全的HTML内容（比如脚本、内联样式），如果你的disclaimer包含这类内容，会被自动清理。

确认内容安全的前提下，可以用DomSanitizer绕过检查：

// contact-us.component.ts
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// ... 其他代码
export class ContactUsComponent implements OnInit {
  safeDisclaimer: SafeHtml;

  constructor(
    private legalService: LegalService,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.legalService.legalInfo$.subscribe(data => {
      if (data?.disclaimer) {
        this.safeDisclaimer = this.sanitizer.bypassSecurityTrustHtml(data.disclaimer);
      }
    });
  }
}

模板中改用这个安全变量：

<div [innerHTML]="safeDisclaimer"></div>

4. 检查接口返回的数据结构 #

最后确认接口返回的数据里确实有disclaimer字段，比如在父组件中打印日志验证：

async getLegalContent() {
  const legalData = await this.legalService.getLegaPages().toPromise();
  console.log('接口返回数据:', legalData); // 查看控制台输出，确认是否存在disclaimer字段
  this.legalService.setLegalInfo(legalData);
}

如果字段名拼写错误（比如写成disclamer），也会导致内容无法展示。

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