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-->

此外，您将使用所需的结构构建您的 LoginComponent。 AppComponent 中的路由器插座将被 BasicAppComponent 或 LoginComponent 替换。

Answer 2

你需要一个路由器：https://angular.io/docs/ts/latest/guide/router.html 您的主要组件可能是然后您将使用常量来定义要加载的女巫组件...