角7，属性选择器，防止清除现有内容
角7，属性选择器，防止清除现有内容
提问于 2018-12-04 16:56:18
当我使用选择器作为属性时，注入的内容将完全清除标记的先前内容，例如：
https://stackblitz.com/edit/angular-s2nykd
@Component({
selector: 'my-app',
template: `
<p attrib>
Start editing to see some magic happen :)
</p>
`,
})
export class AppComponent {
}
@Component({
selector: '[attrib]',
template: `<p>my-comp works!</p>`
})
export class MyCompComponent {}因此，将出现以下情况：
<p attrib>
<p>my-comp works!</p>
</p>因此，所有以前的内容：Start editing to see some magic happen :) -被删除。
请告诉我如何使以前的内容不被清除。
这就是我想得到的结果：
<p attrib>
Start editing to see some magic happen :)
<p>my-comp works!</p>
</p>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-04 17:10:45
您可以考虑在<ng-content> NgComponentOutlet标记中使用transclusion来“合并”内容：
@Component({
selector: '[attrib]',
template: `
<p>
my-comp works!
<ng-content></ng-content>
</p>
`
})
export class MyCompComponent {}下面是一个正在运行的示例。
希望这能帮上忙！
Stack Overflow用户
发布于 2018-12-04 17:12:21
如果要附加指令，请使用HTML。
@Directive({
selector: '[attrib]'
})
export class MyDirective implements OnInit {
tag: string = 'p';
template: string = 'my-comp works!';
constructor(private el: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document) {}
ngOnInit() {
const child = document.createElement(this.tag);
child.innerHTML = this.template;
this.renderer.appendChild(this.el.nativeElement, child);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53617942
复制相关文章
相似问题
腾讯云开发者
