Angular 4中如何动态创建带动态ID的div？TypeScript赋值失败

看起来你在Angular里尝试给Div设置ID但没成功，我来帮你分析下可能的原因和解决方案：

情况1：给宿主Div（带class="one"的那个）添加ID #

如果你的目标是给模板里的这个外层Div加ID，不需要绕弯子，直接用[attr.id]绑定变量就行：

修改app.component.html： #

<div class="one" [attr.id]="targetId" [innerHtml]="htmlToAdd"></div>

在app.component.ts里定义变量： #

import { Component } from '@angular/core';
// 其他导入...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  targetId = 'my-custom-div-id'; // 这里设置你想要的ID
  htmlToAdd = '<p>你的内部HTML内容</p>';
  // 其他代码...
}

这样渲染后，外层Div就会带有你设置的ID了。

情况2：让innerHtml插入的Div带有ID #

如果是插入的内部HTML里的Div没带上ID，先检查这两点：

1. 确保htmlToAdd的字符串正确
   你需要在构造htmlToAdd的时候明确写入ID，比如：

   htmlToAdd = '<div id="inner-div-id">这是带ID的内部Div</div>';
   

2. 处理Angular的HTML安全校验
   如果你的htmlToAdd是通过HTTP请求获取的动态内容，Angular可能会自动清理掉它认为不安全的内容（不过ID属于安全内容，一般不会被清理）。如果确实遇到被清理的情况，可以用DomSanitizer来标记内容为安全：

   修改app.component.ts： #

   import { Component } from '@angular/core';
   import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
   // 其他导入...
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     htmlToAdd: SafeHtml;
   
     constructor(private sanitizer: DomSanitizer) {
       // 假设这是你要插入的带ID的HTML
       const rawHtml = '<div id="safe-inner-div">安全的内部HTML</div>';
       this.htmlToAdd = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
     }
     // 其他代码...
   }
   

额外注意：操作DOM的时机 #

如果你是想在代码里通过ID获取这个Div（比如用jQuery或ElementRef），要确保在DOM渲染完成后再操作，也就是在ngAfterViewInit钩子函数里执行：

import { Component, AfterViewInit } from '@angular/core';
// 其他导入...

export class AppComponent implements AfterViewInit {
  // 变量定义...

  ngAfterViewInit() {
    // 这里可以安全地获取带有ID的Div
    const targetDiv = document.getElementById('your-div-id');
    // 或者用jQuery：$('#your-div-id').doSomething();
  }
}

你可以根据自己的实际情况选择对应的方案，要是还有具体的代码细节没说清楚，也可以补充出来～

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