Angular2中的innerHTML中未呈现样式

Question

我正在 Angular2/4 中开发一个具有左侧导航栏的页面。我将此左侧菜单放在一个单独的组件中，并将其嵌套在主组件中。原因是我需要在多个页面/组件中重用这个左侧菜单，但是，不同的页面会有不同的菜单项。所以，我试图通过 @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>`;


   }

我看到的是样式正在从 innerHTML 中删除。我按照以下说明进行操作，但没有运气：

Angular2 innerHtml binding remove style attribute

我了解到在 angular2 中不建议直接访问 DOM，但是对于这种情况有更好/推荐的方法吗？任何帮助将不胜感激！

问候

Answer 1

您试图通过 innerHTML 实现的事情也可以使用 ng-content 来完成，这会将特定组件 html 包含在您的 sidemenu html 中。

你的 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>

您的 application-main.component.html 或您想要包含 sidemenu 组件的任何文件应该是这样的：-

<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>

您还可以使用 [select] 属性将多个 ng-content 放入一个组件中。

<ng-content select="[header]"></ng-content>

在使用它的其他组件文件中，只需在父 html 标记上将在 select 中分配的名称作为属性分配给这样的标记..

<div header> Blah blah..... </div>