Angular 4 <router-outlet>中断页面布局

Question

我使用Zurb Foundation作为CSS框架启动了一个Angular 4应用程序，在我不得不使用Router为应用程序提供导航之前，一切看起来/行为都很好。为了更好地理解，这里是布局的可视化表示：

​

​

这是HTML标记，使用Foundation CSS：

<div class="grid-y medium-grid-frame" #application>    <!-- (1) Main content grid -->
  <div class="cell shrink header">    <!-- (1.1) HEADER-->
    <!-- MENUBAR -->
  </div>

  <div class="cell medium-auto medium-cell-block-container">    <!-- (1.2) WEB MAIN CONTENT SECTION -->

    <div class="grid-x grid-padding-x">
      <div class="cell medium-2 medium-cell-block padding-top-1" data-sticky-container>    <!-- (1.2.1) LEFT SIDEBAR -->

        <!-- INDEPENDENTLY SCROLLABLE LEFT SIDEBAR -->
      </div>

      <div class="cell medium-10 medium-cell-block padding-top-1">  <!-- (1.2.2) MAIN CONTENT -->

        <!-- INDEPENDENTLY SCROLLABLE MAIN DIV -->

      </div>

    </div>

  </div>

  <!-- (1.3) BOTTOM PANEL -->
  <div class="cell medium-3 footer">

    <!-- OBJECT INFO -->

  </div>

</div>

添加导航后，我必须在组件中移动一些代码，现在应用程序模板如下所示：

<div class="grid-y medium-grid-frame" #application>    <!-- (1) Main content grid -->

  <router-outlet>  <!-- APP MAIN ROUTER -->
    (1.1) HEADER

    <router-outlet>  <!-- SECONDARY OUTLET, TO LOAD THE COMPONENT SELECTED IN THE MENU BAR -->
      (1.2) WEB MAIN CONTENT SECTION

      (1.3) BOTTOM PANEL
    </router-outlet>

  </router-outlet>

</div>

应用程序正确加载组件，但左侧边栏和主要内容不再可滚动，底部面板丢失，因此应用程序不可用。会不会是因为<router-outlet>标签使得CSS类的应用不正确？

提前谢谢你，

Answer 1

我的猜测是，Angular把router-outlet搞混了。

我建议首先添加一个名称，这样您和Angular就可以区分不同的插座，如下所示：

路由配置：

{path: 'main', component: MainComponent, outlet: 'app-main'}

和插座

`<router-outlet name='app-main'></router-outlet>

你的另一个插座也是如此。

试试这个，看看它是否有效。

Answer 2

您需要使用命名路由器插座，以防您尝试连接多个插座，然后在路由器配置中提供路由器名称作为插座

<b>
  <router-outlet></router-outlet>   
  <router-outlet name="example"></router-outlet>
</b>

[
    {
        path: 'route',
        component: ExampleComponent,
        outlet: 'example'
    }
]

Answer 3

我认为这个问题是因为添加了<router-outlet>使得一些样式没有被应用。在这里，您可以看到使用路由器前后应用程序的DOM：

​

​

在这里，将CSS应用于DIV <div class="cell medium-auto medium-cell-block-container>... </div>

注:我前后交换了一下，对不起！

正如您所看到的，有几个CSS规则没有应用，因为它们使用了> CSS选择器，该选择器仅适用于直接后代。层次结构中更深的div也会发生同样的情况。

我是否必须添加自定义CSS来解决此问题？