Angular 2,Routing,多主布局

2023年2月10日 178次阅读

我有一个关于如何在angular2中拥有多个主布局的问题.

例如：我的网站有2个部分,首先是前端(用户可以看到,它有自己的主布局,其网址是http://mywebsite.com/...)

它还有一个管理部分(这个部分有自己独立的布局,其网址为http://mywebsite.com/admin/...)

现在的问题是,如果在app.ts文件中我定义了页面的路由和模板,如：

<div>
    <router-outlet></router-outlet>
</div>

然后我必须将每个布局相关的组件放在每个后续的子组件中(http://mywebsite.com/products)

<my-nav></my-nav>
<my-sidebar></my-sidebar>
<div class="content">
    <!-- actual content of this component -->
</div>
<footer></footer>

并再次为http://mywebsite.com/customers,相同的HTML标记.

然后我又需要一个

<my-admin-nav></my-admin-nav>
 ...

管理员布局一遍又一遍.

所以基本上我的问题是我怎么能过来这个？或者我可能认为完全错了,请指导我一个更好的方向.谢谢

最佳答案 有几种方法可以在组件之间切换：

1)使用ngSwitch在< my-nav>< / my-nav>之间切换和< my-admin-nav>< / my-admin-nav>组件.
文件：https://angular.io/docs/ts/latest/api/common/NgSwitch-directive.html

2)使用ViewContainerRef.createComponent()

点赞