Question

我有一个带有登录和主页的Angular 2项目。我一直在复制+粘贴侧边栏到所有components.html。

有没有办法像侧栏一样重新使用组件，每当我创建一个新组件时调用它还是有另一种方式？侧边栏代码位于pastebin：Sidebar.html

    <!-- ... -->
    <div class="sidebar-wrapper">
        <div class="logo">
            <a href="http://www.creative-tim.com" class="simple-text">
                Util FAQ
            </a>
        </div>

        <ul class="nav">
            <li>
                <a routerLink = "/home">
                    <i class="ti-home"></i>
                    <p>Página Principal</p>
                </a>
            </li>
            <li>
                <a routerLink = "/perfil">
                    <i class="ti-user"></i>
                    <p>Perfil</p>
                </a>
            </li>
            <li>
                <a routerLink = "/programas">
                    <i class="ti-view-list-alt"></i>
                    <p>Programas</p>
                </a>
            </li>
            <li>
                <a routerLink = "/submissoes">
                    <i class="ti-text"></i>
                    <p>Submissões</p>
                </a>
            </li>
            <li class="active">
                <a routerLink = "/temas">
                    <i class="ti-package"></i>
                    <p>Temas</p>
                </a>
            </li>
            <li>
                <a routerLink = "/utilizadores">
                    <i class="ti-server"></i>
                    <p>Utilizadores</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- ... -->

Answer 1

您希望在app.component中使用多个路由器插座，如下所示：

<div class="container-fluid grid myappbody">
  <!-- Static Nav Bar -->
  <div class="row mynav">
      <router-outlet name="core"></router-outlet>
  </div>

  <!-- Static App Area -->
  <div class="row mymain">
    <router-outlet></router-outlet>
  </div>

  <!-- Footer Area -->
  <div class="row myfooter">
    <router-outlet name="footer"></router-outlet>
  </div>
</div>

使用像...这样的路由。

const routes: Routes = [
  { path: 'home', component: CoreComponent, outlet: 'core' },
  { path: 'home', component: FooterComponent, outlet: 'footer' },
  { path: '', component: CoreComponent, outlet: 'core' },
  { path: '', component: FooterComponent, outlet: 'footer' },
  { path: 'acct', loadChildren: loadAcctModule },
  { path: '', redirectTo: '/acct', pathMatch: 'full' },
  { path: '**', redirectTo: '' }
];

新模块中的Angular 2 Sidebar

1 个答案: