1

我想使用 angular 4 将我的布局与不同的组件分开。

顺便说一句，我使用https://edcarroll.github.io/ng2-semantic-ui/#/modules/sidebar

我分为 3 个组件：

  1. 顶部导航的顶部栏
  2. 侧边栏导航
  3. 基础布局的基础

顶栏：

<div class="ui top yellow fixed inverted menu">
  <a class="item" (click)="sidebar.toggle()">
    <i class="sidebar icon"></i>
  </a>
  <div class="item">
    My Website
  </div>
  <a class="item" routerLink="/">Home</a>
  <a class="item" routerLink="/news">News</a>
  <div class="right menu">
    <div class="ui category search item">
      <div class="ui transparent icon input">
        <input class="prompt" type="text" placeholder="Search User...">
        <i class="search link icon"></i>
      </div>
      <div class="results"></div>
    </div>
    <div class="ui dropdown item" suiDropdown>
      Yoza Wiratama <i class="icon dropdown"></i>
      <div class="menu" suiDropdownMenu>
        <a class="item">Edit Profile</a>
        <a class="item" routerLink="/auth/login">Log Out</a>
      </div>
    </div>
  </div>
</div>

侧边栏：

<sui-sidebar class="inverted vertical" #sidebar>
  <a class="item">1</a>
  <a class="item">2</a>
</sui-sidebar>

根据 ：

<app-topbar></app-topbar>
<sui-sidebar-container class="ui bottom attached segment">
  <app-sidebar></app-sidebar>
  <sui-sidebar-sibling [isDimmedWhenVisible]="true">
    <div class="ui container" style="margin-top: 50px;">
      <router-outlet></router-outlet>
    </div>

    <div class="ui basic segment">
      <h3 class="ui header">Content</h3>
      <p>Example content beside the sidebar</p>
      <button class="ui button" (click)="sidebar.open()">Open Sidebar</button>
    </div>
  </sui-sidebar-sibling>
</sui-sidebar-container>

因为我将它与不同的组件一起使用，所以侧边栏切换不起作用

请帮助我如何使这项工作

我希望我将它与不同的组件分开

谢谢

4

0 回答 0