Question

我有问题。

https://stackblitz.com/edit/angular-sc7zsc

我的组件成分未称为... 为什么？我已经看到其他人发帖了，但不能解决我的问题谢谢

Answer 1

在此固定代码，别忘了浏览“合成”页面。

<!doctype <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>
<body>


  <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar">
    <!-- Brand -->
      <a routerLink="" class="pull-left">
        <img src="//www.behi.fr/wp-content/themes/behi-wp/assets/images/logo-softee.svg" class="logo-softee">
      </a> 

    <!-- Links -->
    <ul class="navbar-nav">

      <li class="nav-item" routerLinkActive="active" >
        <a class="nav-link" routerLink ="Composition" >Composition</a>
      </li>
      <div *ngIf="validCompo;then green_circle else red_circle">
          <ng-template #red_circle><img name="redCircle" style="width:15px;height:15px;margin-left:-45px;margin-top: 20px;" src="../../assets/images/circle/red_circle_16.png"></ng-template>
          <ng-template #green_circle><img name="greenCircle" style="width:15px;height:15px;margin-left:-45px;margin-top: 20px;" src="../../assets/images/circle/green_circle_16.png"></ng-template>
      </div>

    </ul>

  </nav>
<router-outlet></router-outlet> // <== feed your content from here
</body>
</html>

Answer 2

在index.html文件的头部添加基本路径

<base href="/">

在app.component.html中添加<router-outlet></router-outlet>，并且您还更改了index.html代码。请不要更改index.html，而应在上面建议添加基本路径。

Answer 3

您只需放置路由器出口标签

将路由器出口标签保留在要显示路由组件的位置

这是stackblitz Forked Stackblitz

的分叉存储库

Answer 4

您错过了<router-outlet> </router-outlet> 请在导航后的app.component html文件中添加以下代码。

<router-outlet> </router-outlet>

Answer 5

问题已解决。按图片更新

角路由返回空白页

5 个答案: