素材巴巴 > 程序开发 >

angular辅助路由(插座为平级的关系)

程序开发 2023-09-04 15:50:08

以一个案例说明:

最终的效果图:绿色的为聊天组件

 

下面看代码:这是在app组件上的布局文件,代码最后一行有一个别名为aux的插座,它就是用来显示聊天面板的插座。聊天组件为chat,这里还不写了,接着看路由的参数控制,当点击“开始聊天”的时候,显示aux插座中的chat组件。当点击“结束聊天”时,显示aux插座,但为空。

 

 

下面是对应的app-routing,module.ts中的辅助路由配置:代码中指明了outlet的值为aux,即chat组件显示在aux插座上,其余的路由配置中没有写outlet则表示他们都是显示在默认的插座中,就是主插座,即primary插座。

 

 

主插座:

primary代表主插座。primary在上面代码中表示:当点击“开始聊天”时,主插座中显示home组件,aux组件显示chat组件。


标签:

上一篇: Angular4 开发环境搭建 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。