Angular 路由——实现样式切换

在登陆界面可能我们想要样式 A,在登录后的仪表盘界面我们想要样式 B。在 Angular 中,我们可以通过路由机制来实现这个效果。

路由与子路由实现样式切换

路由的本质上是 URL 到组件的映射。对于不同样式,我们可以把它分别设计为不同的组件。然后可以把同一个样式的页面放到对应样式中作为子组件。最后通过路由进行映射,实现不同样式页面的共存。

具体来说,针对不同的样式编写不同的组件,顶层通过单个 <routoulet> 实现不同样式组件的导航。在样式组件中再次放置<routoulet>,并通过子路由的形式把相关的组件映射到这个样式组件中,如下所示。

这个在线例子通过这种方法实现不同样式间页面的切换。

参考链接

How to switch layouts in Angular2