我正在尝试创建一个可配置的可重用表。单元格可以配置为具有 html 模板。
我正在配置“ Review ”列，使其具有带有带有点击事件的锚标记的 html 模板（review(row)）。
到目前为止，我尝试将此模板作为innerHTML 插入，但所有角度绑定都不起作用。然后我尝试创建一个动态调用的组件（review.component.ts），但该组件仅在第一行调用一次。此外，我没有找到任何方法将当前行项目传递给单击事件 review(row) （在 review.component.ts 内）。
雇员.组件.ts：
import { Component, OnInit, DynamicComponentLoader, ElementRef, Inject, Injector} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {DataTableComponent} from '../../data_table/data_table.component';
import {DataTable} from '../../data_table/dataTable';
import {Cell} from '../../data_table/cell';
import {ReviewComponent} from './review.component';
@Component({
selector: 'employee',
templateUrl: './app/employee/employee.html',
directives: [DataTableComponent, ReviewComponent, RouterLink, RouterOutlet, ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class EmployeeComponent implements OnInit {
public tableConfig: DataTable;
public …我想在 .ts 文件中有一个模板字符串并将其添加到 NgTemplateOutlet。
我希望这会奏效，但没有。
<template [ngTemplateOutlet]="template" [ngOutletContext]="$implicit">
其中模板是范围内的字符串变量。所以我实现了这个，但是这也不能像我想要的那样工作。
import { Component, AfterViewInit } from '@angular/core';
import { ToastController } from 'ionic-angular';
import { ModalController } from 'ionic-angular';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Component({
selector: 'dynamic-report',
templateUrl: 'dynamicReport.html',
})
export class DynamicReport implements AfterViewInit{
private _template: string;
context: any;
public get template() : SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(this._template);
}
constructor(public toastCtrl: ToastController, public modalCtrl:ModalController, private sanitizer: DomSanitizer) {
this._template = "<button (click)='testFunction1('2')'>Click here 2!</button>";
this.context = this;
}
testFunction1(message){
console.log(message); …我正在运行时创建 Angular 代码，特别是，我使用 SVG 库来创建一个矢量图形，其中包含 Angular 代码指令，如(click)='myMethod()'，反过来，调用我在 SVG 封闭组件中静态定义的方法。在运行时生成我需要编译创建的模板并将其添加到组件中。我当时在这篇文章的帮助下用 Angular 3 实现了这样的代码，这篇文章非常繁琐。我尝试在 Angular 8 应用程序中复制旧代码：
private addComponent(template: string) {
@Component({template: template + ' <div #target></div>'})
class TemplateComponent {
@ViewChild('target', {static: false, read: ViewContainerRef}) public target;
constructor() {
}
public myMethod() {
// do something
}
}
@NgModule({declarations: [TemplateComponent]})
class TemplateModule {
@ViewChild('target', {static: false, read: ViewContainerRef}) public target;
}
// ERROR in next line:
const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType …我想知道如何将变量放在字符串中并使用Angular2渲染它？
这是我的代码:
HTML:
<div [innerHTML]="testHTML"></div>
变量:
public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";
"variable"是一个字符串数组,不是null,至少包含1个值.
我得到的是:
test - {{variable [0]}}
H1渲染得很好.但是我的变量没有被插入!
我怎么解决这个问题？
我的组件中有以下功能:
onProductSelect(e){
var attrs = document.getElementById('firstAttr');
return this.groupComponentSvs.getProduct(e.target.value)
.subscribe(
selectProduct=>{
this.selectProduct=selectProduct;
var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";
console.log(select);
select+= '<option value="0">Select</option>';
for (var i=0; i<selectProduct.values.length; i++) {
select+= '<option value='+ selectProduct.values[i]+ '>'+ selectProduct.values[i] +'</option>';
}
select+='</select>' ;
attrs.innerHTML = '<div id=attr_'+ selectProduct.attribute +'>'+ select +'</div>';
error=>this.errorMessage = <any>error
}
)
}
selectNextAttr(attr, val){
console.log("this is a test");
}
我可以在我的html页面中插入选择菜单,但是我选择一个项目时没有触发更改事件.有人能告诉我为什么会这样吗？
谢谢
我正在尝试使用Angular（5）创建一个博客。我正在使用markdown并将该数据存储在应用程序外部。它下载markdown，将其解析为html字符串，然后绑定到innerHTMLdiv的。
我知道我正在努力工作，但是我真的很希望能够在这里创建一个优雅的解决方案。
拥有使用自定义组件的能力，使我们能够在博客中做很多事情，否则我们将做不到。注册组件，自定义小部件等。我们可以完成所有这些操作，但仍然可以将内容分别存储在应用程序外部。
从innerHTML字符串中未检测到自定义组件。不允许的。似乎过去DynamicComponentLoader曾为此提供解决方案，但现在已经不复存在了。
我不是在尝试仅呈现html或仅呈现单个组件。我想呈现HTML和包括的所有组件。
我也不在乎它是否绑定到该innerHTML属性，它似乎使我最遥远。我可以/将使用resolverif会有所帮助。
https://stackblitz.com/edit/angular-wylp55
如您所见，hello组件在html中呈现，但组件本身未呈现。
任何帮助，将不胜感激。
我必须使用模板上的[innerHTML]标签通过typescript输入一些html.
我想在html上放一个click函数:
status = "<img src='assets/hello.png' (click)='hello()' />";
但点击功能被控制台剥离了:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
我看到有些人提到使用"DomSanitizer",但找不到修复我确切问题的例子.