Angular 2 dynamic html

我已经在角度2视图中创建了一个表，并且我想动态地绑定html或角度组件。Angular 2 dynamic html

<tbody> 
     <tr *ngFor="let hHeader of hHeaders;let x=index"> 
     <td class="hour"><span>{{hHeader}}</span></td> 
     <td *ngFor="let vHeader of vHeaders;let y=index" class="hour " [contextMenu]="basicMenu " [contextMenuSubject]="{t:hHeader,d:vHeader,x:x,y:y} "> 
      <div #values [class.cell]="cell" id="cell-{{x}}-{{y}}" style="width:100%; height: 100%"></div> 
     </td> 
     </tr> 
    </tbody>

我可以识别每个小区在组分

for (let i = 0; i < cells.length; ++i) { 
     if (cells[i].nativeElement.id == 'cell-' + event.x + '-' + event.y) { 
     // cells[i].nativeElement.style.backgroundColor = '#5789D8'; 
     cells[i].nativeElement.innerHTML = '<div class="drag" dnd-draggable [dragEnabled]="true">Drag me</div>' 
     console.log(cells[i]); 
     } 
    }

，但我不能结合的html或组件是这样的。

<div class="drag" dnd-draggable [dragEnabled]="true">Drag me</div>

来源

2017-06-23 Ishaka

究竟你在找什么？ –

我想添加HTML或角度2组件到 – Ishaka

不要这样编程。 DOM不是一个很大的字符串，你可以在某个地方构建和粘贴。即使你这样做，你的大内部HTML字符串中的角度逻辑也不会被解释。在您的模板中写入HTML。 – 2017-06-23 06:12:54

如果你只是希望绑定HTML到您的TD喜欢它的声音，那么你可以使用的innerHTML属性

<td ...[innerHTML]="whateverValue"...>

来源

2017-06-23 06:13:20 Nieminen

我认为'nativeElement.innerHTML ='

Drag me

''这个不是通过编译器编译的。它需要作为字符串。我使用了一些npm软件包。他们不工作 – Ishaka

我更喜欢用管这个。 https://angular.io/guide/security#bypass-security-apis

我发现这是在一个论坛上https://forum.ionicframework.com/t/inserting-html-via-angular-2-use-of-domsanitizationservice-bypasssecuritytrusthtml/62562/2

import {Pipe, PipeTransform} from '@angular/core'; 
import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; 

@Pipe({ 
    name: 'safe' 
}) 
export class SafePipe implements PipeTransform { 

constructor(protected _sanitizer: DomSanitizer) { 

} 

    public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { 
     switch (type) { 
      case 'html': return this._sanitizer.bypassSecurityTrustHtml(value); 
      case 'style': return this._sanitizer.bypassSecurityTrustStyle(value); 
      case 'script': return this._sanitizer.bypassSecurityTrustScript(value); 
      case 'url': return this._sanitizer.bypassSecurityTrustUrl(value); 
      case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value); 
      default: throw new Error(`Invalid safe type specified:  ${type}`); 
     } 
    } 

}

要实现只使用<component-container [innerHtml]='this.safteyPipe.transform(TemplateComponentString)'></component-container>

来源

2017-09-05 18:19:25 Rex

Angular 2 dynamic html

回答

相关问题