Question

我刚刚开始学习angularjs 7，并且遇到了路由问题

我已在 app.component.html

中添加了路由器出口标签。

   <app-nav>
       <section>
            <router-outlet></router-outlet>
      </section>
   </app-nav>

在 app-routing.module.ts

中添加了此内容

       const routes: Routes = [
          {
              path: '', component: HomeComponent
          },
          {
              path: 'about', component: AboutComponent
          },
          {
              path: 'contact', component: ContactComponent
          },
          ];

并且我在 nav.componenet.html

中使用了routerLink属性

  <header>
      <div class="container">
          <a routerLink="/" class="logo">{{appTitle}}</a>
      <nav>
       <ul>
            <li><a routerLink="/">Home</a></li>
            <li><a routerLink="/about">About</a></li>
            <li><a routerLink="/contact">Contact</a></li>
       </ul>
      </nav>
      </div>
  </header>

当我单击“主页”或“关于”或“联系人”链接时，它不会重定向（路由）到主页组件或组件或联系人组件。请让我知道我在这里做错了什么。

Answer 1

请提供路由器文件的完整视图。您需要导入路由数组并指定RouterModule。这是一个很好的例子：https://angular.io/guide/router

Answer 2

我正在尝试使用router-outlet在另一个组件（）中添加一个新组件。因此，当我将路由器插座与其分开时，它工作正常。请在下面找到有效的解决方案。

   <app-nav></app-nav>
   <section>
        <router-outlet></router-outlet>
  </section>

路由器出口或路由在angularjs7中不起作用？

2 个答案: