[英]Inner HTML of ng-container, Angular 4?
I want to dynamically place an html code in my html code, So I write the following code: 我想动态地在我的html代码中放置一个HTML代码,所以我写下面的代码:
<ng-container [innerHTML]="buttonIcon"></ng-container>
Angular says innerHTML
is not valid attribute for ng-container
Angular说
innerHTML
不是ng-container
有效属性
I don't want to use third html tag like follows: 我不想使用如下的第三个html标签:
<div [innerHTML]="buttonIcon"></div>
So how can I insert html codes without any tag inner html binding? 那么如何在没有任何标签内部html绑定的情况下插入html代码呢?
You can use ngTemplate: 你可以使用ngTemplate:
<ng-template #buttonIcon>
<div> Your html</div>
</ng-template>
<ng-container
*ngTemplateOutlet="buttonIcon">
</ng-container>
** Please read the comments. **请阅读评论。 This answer might be wrong.
这个答案可能是错的。 I dont know, have not looked into it again **
我不知道,还没有再看一遍**
ng-container
does not get rendered to html, it is a mere structural directive . ng-container
不会被渲染为html,它只是一个结构指令 。
The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM .
Angular是一个分组元素,不会干扰样式或布局,因为Angular 不会将它放在DOM中 。
So there is no element to put html into. 因此没有将html放入的元素。 You need to work with a sub-div.
你需要使用sub-div。 If there is no need for a sub-div in your opinion, then you could most probably also just replace
ng-container
with div
itself and not use the container at all. 如果你认为不需要sub-div,那么你很可能也只是用
div
本身替换ng-container
而根本不使用容器。
If for any reason you need to replace the DOM element you can use a div with an id and then use the @ViewChild decorator and ElementRef to get access to the nativeElement from the controller and set the outerHtml property. 如果您有任何理由需要更换的DOM元素,你可以使用一个div一个id,然后使用@ViewChild装饰和ElementRef摆脱控制器访问nativeElement和设置的outerHTML属性。
app.component.tml app.component.tml
<div #iconButton></div>
app.component.ts app.component.ts
import { Component, ViewChild, ElementRef, ViewEncapsulation, AfterViewInit }from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit{
@ViewChild('iconButton')
iconButton: ElementRef;
ngAfterViewInit(){
this.iconButton.nativeElement.outerHTML = '<button>My button</button>'
}
}
We need to use none as encapsulation policy because our template only includes the div to be replaced. 我们需要使用none作为封装策略,因为我们的模板只包含要替换的div。
Stackblitz example: https://stackblitz.com/edit/angular-fa1zwp Stackblitz示例: https ://stackblitz.com/edit/angular-fa1zwp
[outerHTML]
will do the trick to replace the outer element. 将完成替换外部元素的技巧。
In your case 在你的情况下
<div [outerHTML]="buttonIcon"></div>
It's true, that it's important to have a clean HTML structure for eg keeping CSS rules as simple as possible. 确实,拥有一个干净的HTML结构非常重要,例如尽可能简化CSS规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.