Angular中路由的嵌套-父子路由

老鼠大哥 發表於 2020-5-19 22:44:00

<h1>场景</h1>
Angular介绍、安装Angular Cli、创建Angular项目入门教程：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 
Angular新建组件以及组件之间的调用：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
通过以上搭建起Angular项目。
Angular中的路由配置、路由重定向、默认选中路由：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994
注：
博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
<h1>实现 </h1>
如果要实现如下这种父子路由的嵌套 
<img alt=""> 
首先新建三个组件home组件、welcome组件、setting组件，其中home组件是父组件，welcome组件和setting组件是子组件

<div class="cnblogs_code">
<pre>ng g component components/home</pre>
</div>
<div class="cnblogs_code">
<pre>ng g component components/home/welcome</pre>
</div>
<div class="cnblogs_code">
<pre>ng g component components/home/setting</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200519224336569-1847784682.jpg" alt="">
 
 
<img alt="">
然后在app-routing.module.ts中引入这三个组件并配置父子路由
<div class="cnblogs_code">
<pre>import { HomeComponent } from './components/home/home.component';
import { WelcomeComponent } from './components/home/welcome/welcome.component';
import { SettingComponent } from './components/home/setting/setting.component';</pre>
</div>
 
<div class="cnblogs_code">
<pre>const routes: Routes = [
{

path:'home',component:HomeComponent,

children:[

 {path:'welcome',component:WelcomeComponent},

 {path:'setting',component:SettingComponent},

 {path:'**',redirectTo:'welcome'}
]

}
];</pre>
</div>
 
最后一个两个星号的路由配置是配置默认路由是欢迎组件的页面。 
然后在home页添加路由跳转 
<div class="cnblogs_code">
<pre><div class="content">

<div class="left">

 <a ="[ '/home/welcome']" routerLinkActive="active">欢迎首页</a>

 

 
 <a ="[ '/home/setting']" routerLinkActive="active">系统设置</a>

</div>

<div class="right">

 <router-outlet></router-outlet>

</div>

</div></pre>
</div>
为了让子组件显示在父组件中所以添加<router-outlet></router-outlet>
为了显示出左右布局，所以在home的scss中添加样式
<div class="cnblogs_code">
<pre>.content{

width:100%;
height:500px;
display:flex;

.left{

 width:200px;
 border-right:1px solid #eee;
 height:500px;
}
.right{

 flex:1px;
}
}</pre>
</div>
 
 
运行项目看效果 

</div>
<div id="MySignature" role="contentinfo">
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。 
来源：https://www.cnblogs.com/badaoliumangqizhi/p/12920158.html

頁: [1]

琼殿技术论坛's Archiver

Angular中路由的嵌套-父子路由