时间戳

首页 > 解决方案 > 不同组件中的角度路线导航

angular - 不同组件中的角度路线导航

问题描述

我正在做一个有角度的项目，我在这方面还是新手。想在我在这里做错的事情上寻求您的帮助。

1 - 使用路由器定义组件头，使用路由器链接进行导航 在此处输入图像描述

当我在 app.component.html 中添加组件时很好。添加了组件标头，我可以解决任何问题 app-headers></app-headers

但是我想在另一个名为 datosB 的组件中使用标题。添加后，标题已加载，但链接不起作用。

任何帮助都会很棒。谢谢

代码

headers.component.html

<div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark sticky-top shado">
   <a routerLink='/'  class="navbar-brand" (click)="onClick()" >
      <img [src]=logo alt="Logo" style="width:40px;">
         {{ logoName }}
   </a>
   <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"> </span> 
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav w-100 nav-justified" >
        <li class="nav-item" routerLinkActive="active" *ngFor="let nav of navbars" (click)="onClick()"  >
           <a class="nav-link" [routerLink]=nav.routerlink>
              {{ nav.name }}
           </a>
        </li>
     </ul>
   </div>
</nav>

headers.component.ts

export class HeadersComponent implements OnInit {
  navbars = [{ name : 'Datos Generales',     routerlink : 'datosgenerales'},
             { name : 'Plan de  Enseñanza',  routerlink : 'planensenanza'},
             { name : 'Plan de Aprendizaje', routerlink : 'planaprendizaje'},
             { name : 'Plan Tutorial',       routerlink : '#'},
             { name : 'Bibliografia',        routerlink : '#'}];
  checkHome = "";
  @Output() signInEvent = new EventEmitter<boolean>();

constructor(private route: Router ) {
   }
}

app.component.html

<app-headers></app-headers>
<router-outlet></router-outlet>

datos-generales.components.html

<app-headers></app-headers>

标签： angularcomponents

解决方案

app.component.html

<app-headers></app-headers>
<router-outlet></router-outlet>

页面从路由加载。不需要 app-header 注入所有页面。;)

由于您没有共享程序代码，这就是我可以添加的全部内容。

推荐阅读