是否可以创建“独立”组件,即没有基本应用布局的组件?
在我的 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-->
我怎样才能做到这一点?
最佳答案
如果我没理解错的话,您目前有一个根应用程序组件,其中包含页眉、导航和页脚组件,每个组件控制屏幕的一部分。
对您的问题的简短回答是:是的,组件不一定需要包含在根 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。
关于Angular 2 - 独立组件(无布局),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40801810/