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。

修改

你可以为你的＆＃34;基本应用布局＆＃34;提供一个额外的包装，比如 BasicAppComponent ，其模板具有以下结构：

 <app-navigation></app-navigation>  <div id="page-wrapper" class="gray-bg">  <app-topnavbar></app-topnavbar>  <router-outlet></router-outlet>  <app-footer></app-footer> </div> 

然后，在您的根应用程序组件（ AppComponent ）中，您将拥有如下结构：

 <div id="wrapper">  <router-outlet></router-outlet> </div> 

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

Answer 2

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

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

2 个答案: