Angular 2 - 独立组件(无布局)

Question

是否可以创建“独立”组件，即没有基本应用布局的组件？

在我的 app.component.html 中，我定义了导航、页眉和页脚。但现在我想要一个使用不同基本布局的登录组件。

我的 app.component.html 看起来像这样:

<!-- Wrapper-->
<div id="wrapper">
    <!-- Left navigation bar -->
    <app-navigation></app-navigation>

    <!-- Main page wrapper -->
    <div id="page-wrapper" class="gray-bg">

        <!-- Top navigation -->
        <app-topnavbar></app-topnavbar>

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

        <!-- Footer -->
        <app-footer></app-footer>
    </div>
    <!-- End page wrapper-->

</div>
<!-- End wrapper-->

我希望注册和登录组件的路由器导出被包裹在这样的布局中:

<!-- Wrapper-->
<div id="wrapper">

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

</div>
<!-- End wrapper-->

我怎样才能做到这一点？

Answer 1

如果我没理解错的话，您目前有一个根应用程序组件，其中包含页眉、导航和页脚组件，每个组件控制屏幕的一部分。

对您的问题的简短回答是:是的，组件不一定需要包含在根 AppComponent 中。您可以使用应用程序中任何位置的路由简单地导航到您的 LoginComponent。

编辑

你可以为你的“基本应用程序布局”添加一个包装器，比如 BasicAppComponent，其模板具有以下结构:

<!-- Left navigation bar -->
<app-navigation></app-navigation>

<!-- Main page wrapper -->
<div id="page-wrapper" class="gray-bg">

    <!-- Top navigation -->
    <app-topnavbar></app-topnavbar>

    <!-- Main view/routes wrapper-->
    <router-outlet></router-outlet>

    <!-- Footer -->
    <app-footer></app-footer>
</div>
<!-- End page wrapper-->

然后，在您的根应用程序组件 (AppComponent) 中，您将拥有如下结构:

<!-- Wrapper-->
<div id="wrapper">

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

</div>
<!-- End wrapper-->

此外，您将构建具有所需结构的登录组件。 AppComponent 的 router-outlet 将被替换为 BasicAppComponent 或 LoginComponent。