<!--HTML CODE-->
<p #mass_timings"></p>
//controller code
@ViewChild('mass_timings') mass_timings: ElementRef;
constructor(private domSanitizer:DomSanitizer)
getInnerHTMLValue(){
this.mass_timings.nativeElement.innerHTML =
this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}
但是mass_timings显示的输出包括文字: -
安全值必须使用[property] = binding
在开始
如何删除此字符串.
我正在尝试创建一个自定义指令来替换我的自定义指令的内部文本。我似乎无法访问内部文本内容以应用一些逻辑。
这是代码：
import { Directive, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
@Directive({
selector: 'text-transformer'
})
export class TextTransformerDirective {
constructor(
private elem: ElementRef) {
// need access to inner text before setting new text
// elem.nativeElement.outerHTML, innerHTML, outerText, innerText are all empty at this point
elem.nativeElement.outerHTML = '<span>My new Text</span>';
}
}
用法：
<text-transformer>Some text</text-transformer>
我想检查标记内的文本，在这种情况下为“某些文本”。我似乎无法在指令中访问它。
我应该改为使用组件吗？
我需要更改元素的innerHTML，并且我决定创建一个属性指令来完成此任务。我创建了以下示例来说明我基本上要做的事情：
我使用插值来设置段落的内容：
<p changeContentDirective>{{content}}</p>
如果将鼠标悬停在段落上，“changeContentDirective”会修改段落的 innerHTML。
this.el.nativeElement.innerHTML = 'modified by directive';
我还设置了一个在 5 秒后执行的函数，该函数将更改“内容”属性的值：
ngOnInit() {
setTimeout(() => {
console.log('timeout: modify content');
this.content = 'modifed after timeout'
}, 5000);
}
如果我不将鼠标悬停在段落上，则内容将在 5 秒后更改。奇怪的是，如果我将鼠标悬停在元素上（显然在处理程序执行之前），则内容不会被 setTimeout 的处理程序修改
我不确定为什么会发生这种情况，似乎在我以编程方式修改 innerHTML 之后，从 AppComponent 更改“内容”属性对段落显示的 html 没有任何影响。
在我做的实际应用中，结构比较复杂，我不需要修改一个段落的innerHTML，而是修改属于一个表（Kendo Grid）的不同td的innerHTML，因此我不我想我不能用管子。
我的问题是我是否可以通过访问本机元素来修改指令中元素的innerHTML，以及为什么会出现这个奇怪的问题？
提前致谢