Angular项目点击Portfolio路由后页面无内容显示问题求助

问题根因 #

你配置了admin路由的子路由portfolio，但作为父路由载体的AdminComponent模板（admin.component.html）中没有添加<router-outlet>标签，Angular的嵌套路由机制要求父组件必须提供<router-outlet>作为子组件内容的渲染挂载点，缺少该标签就会出现子路由跳转后页面无内容的问题。

解决方案 #

修改admin.component.html文件，在你需要展示子路由内容的区域添加<router-outlet>标签即可，参考修改后的代码：

<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" />
<label for="openSidebarMenu" class="sidebarIconToggle">
  <div class="spinner diagonal part-1"></div>
  <div class="spinner horizontal"></div>
  <div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
  <ul class="sidebarMenuInner">
    <li>
      <a routerLink="portfolio"> <i class="fa fa-credit-card"></i>Portfolio </a>
    </li>
  </ul>
</div>
<!-- 新增router-outlet用于渲染admin下的子路由内容 -->
<router-outlet></router-outlet>

可选优化点 #

• 路由配置中身份模块下的路径写的是singin，疑似拼写错误，可根据需求修正为signin（登录的标准拼写）。
• 路由跳转时建议给routerLink加上前缀斜杠写成/admin/portfolio，避免相对路径在特殊场景下跳转异常。

内容的提问来源于stack exchange，提问作者user17074809