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 comeponent的文件应该是这样的： -

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

在Angular2

....

1 个答案: