[英]Style not rendering in innerHTML in Angular2
I am developing a page in Angular2/4 which has a left navigation bar. 我正在Angular2 / 4中开发一个具有左侧导航栏的页面。 I put this left menu in a separate component and nesting this in the main component.
我将此左侧菜单放在一个单独的组件中,并将其嵌套在主要组件中。 Reason being I need to reuse this left menu in multiple pages/ components, however, different page will have different menu items.
原因是我需要在多个页面/组件中重用此左侧菜单,但是不同的页面将具有不同的菜单项。 So, I am trying to pass the menu items from the main component through @Input() binding:
因此,我试图通过@Input()绑定将主要组件中的菜单项传递给:
sidebar.component.ts:
@Component({
selector:'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
@Input() innerContent:string;
sidebar.component.html:
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px" [innerHTML] = "innerContent"><!--This should hold menu items depending upon main page-->
</ul>
</div>
mainpage.component.html:
-------------------------
sidebar [isSideBarShow]="isSideBarShowShared" [innerContent] =
"viewLayout" (notify) ="onNotify($event)"></sidebar>
mainpage.component.ts
-----------------------
....
ngOnInit() {
//this.nav.hide();
this.viewLayout = `<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>`;
}
What I am seeing is that the style is being dropped from the innerHTML. 我看到的是该样式已从innerHTML中删除。 I followed following instructions, but no luck:
我遵循以下指示,但没有运气:
Angular2 innerHtml binding remove style attribute Angular2 innerHtml绑定删除样式属性
I learned that accessing DOM directly is not recommended in angular2 but any better/ recommended approach for this scenario? 我了解到在angular2中不建议直接访问DOM,但是在这种情况下有没有更好/更推荐的方法? Any help would be very much appreciated!!
任何帮助将不胜感激!
regards 问候
The thing you are trying to achieve by innerHTML can also be done using ng-content which will enclose the specific component html in your sidemenu html. 您要通过innerHTML尝试实现的功能也可以使用ng-content来完成,这会将特定组件html包含在sidemenu html中。
Your sidemenu.html should look like this 您的sidemenu.html应该看起来像这样
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px">
<!--This should hold menu items depending upon main page-->
<ng-content></ng-content>
</ul>
</div>
You application-main.component.html or any file where you want to include sidemenu comeponent should be like this :- 您application-main.component.html或要包含补充菜单助手的任何文件都应如下所示:-
<div>
..... Blah Blah whatever page component html
<sidebar [isSideBarShow]="isSideBarShowShared" (notify)="onNotify($event)">
<!---- Whatever goes inside the component tag , is part of ng-content ---->
<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>
</sidebar>
</div>
Also you can put multiple ng-content in a component using [select] attribute. 您也可以使用[select]属性将多个ng内容放入一个组件中。
<ng-content select="[header]"></ng-content>
And in the other component file using it, just on the parent html tag give the name assigned in select as an attribute to the tag like this.. 在使用它的其他组件文件中,仅在父html标记上给出在select中分配的名称,作为标记的属性,如下所示。
<div header> Blah blah..... </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.