Angular 4 <router-outlet> 打破页面布局答案

【问题标题】：Angular 4 <router-outlet> breaking page layoutAngular 4 <router-outlet> 打破页面布局
【发布时间】：2018-02-24 00:22:34
【问题描述】：

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

这是 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类应用不正确？

提前致谢，

【问题讨论】：

标签： angular zurb-foundation angular-routing

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我对这个问题的猜测是 Angular 混淆了router-outlet。

我建议首先添加一个名称，这样您和 Angular 就可以区分出口，如下所示：

路由配置：

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

和出口

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

您的其他网点也是如此。

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

【讨论】：

您好，我尝试命名辅助插座，但没有任何区别。无论如何，我正在做一些测试，因为如果我命名两个网点，该应用程序总是将我重定向到主页，所以也许我的路线有问题。我会尽快发布结果，谢谢。

【解决方案3】：

我认为问题在于添加<router-outlet> 会使某些样式无法应用。在这里可以看到应用在使用路由器前后的 DOM：

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

注意：我之前和之后交换了，对不起！ 如您所见，有一些 CSS 规则未应用，因为它们使用了 > CSS 选择器，该选择器仅适用于直系后代。层次结构中的更多 div 也会发生同样的情况。

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

【讨论】：