Angular点击Portfolio超链接后页面空白路由问题求助

我点击“Portfolio”超链接后出现页面空白问题：

Portfolio页面无法正常展示：

我对Angular路由系统理解不够透彻，项目文件结构如下：

Identity文件夹下代码 #

identity.component.html代码：

<router-outlet></router-outlet>

singin.component.html代码：

<div
  class="top-bar"
  style="background-color: green; width: 100%; height: 98px;"
></div>

<h1 style="text-align: center">Singin page</h1>

<div style="text-align: center">
  <a href="portfolio">Portfolio</a>
</div>

Admin文件夹下代码 #

admin.component.html代码：

<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>

portfolio.component.html代码：

<h1>Portfolio page</h1>

路由及根组件代码 #

app.routing.module路由配置：

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'identity',
  },
  {
    path: 'admin',
    component: AdminComponent,

    children: [
      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
    ],
  },

  {
    path: 'identity',
    component: IdentityComponent,

    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin',
      },
      {
        path: 'singin',
        component: SinginComponent,
      },
    ],
  },
];

app.component.html代码：

<router-outlet> </router-outlet>

问题1：signin页面跳转链接错误 #

你在signin页面使用了原生href="portfolio"跳转，一是原生跳转不符合Angular单页应用逻辑会刷新页面，二是路径错误，portfolio是admin的子路由，你没有配置根路径下的portfolio路由，所以跳转后匹配不到路由显示空白。
修复方式：将signin.component.html里的跳转代码改为：

<a routerLink="/admin/portfolio">Portfolio</a>

问题2：Admin组件缺失路由出口 #

Angular父子路由规则要求子路由的组件必须渲染在父路由组件的<router-outlet>中，你当前的admin.component.html没有添加这个节点，就算路径跳转正确，portfolio组件也没有渲染位置，页面仍然空白。
修复方式：在admin.component.html末尾添加路由出口：

<router-outlet></router-outlet>

完成以上两处修改即可正常加载Portfolio页面。

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