樣式未在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綁定刪除樣式屬性

我了解到在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或要包含補充菜單助手的任何文件都應如下所示：-

<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內容放入一個組件中。

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

在使用它的其他組件文件中，僅在父html標記上給出在select中分配的名稱，作為標記的屬性，如下所示。

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