Angular 2 - 独立组件（无布局）

Posted 2023-02-23

【中文标题】Angular 2 - 独立组件（无布局）

【英文标题】：Angular 2 - Standalone Component (without layout)

【发布时间】：2017-04-09 16:00:39

【问题描述】：

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

在我的 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-->

我怎样才能做到这一点？

【问题讨论】：

“不同的基本布局”与“没有布局的组件”有什么关系。没有布局的组件是指令。但是在某些地方需要组件并且不支持指令（路由中的component 参数，根组件（NgModule 中的bootstrap 参数）。

【参考方案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 替换。

【讨论】：

是的，但这对我有什么帮助？我不只是想导航到一条路线，我想要一些组件的不同应用程序布局。请参阅我更新的问题。

【参考方案2】：

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