关于Angular 5路线的疑问

2 回答

• 0

  对于可以使用不同的路由器插座，您可以在路由配置中使用children属性 .

  如果您有仪表板，则必须创建名为仪表板的模块和名为仪表板的组件以及仪表板模块的其他路径模块 .

  • dashboard.module.ts

  • dashboard-routing.module.ts

  • dashboard.component.ts

  • dashboard.component.html

  仪表板，routing.module.ts

  const routes : Routes = [
     {
       path : '', component: DashboardComponent,
       children : [
          {path: 'path', component: Component },
          .....
       ]
     }
  ]
  

  Dashboard.component.html

  然后，DashboardComponent中的路径将在dashboard.component.html的router-outlet内加载，在这里您可以拥有一个静态内容菜单 .

  回复于 2024-04-30T01:51:03+08:00
• 0

  您需要将导航栏变为组件本身 .

  navbar.component.ts

  import { Component        } from '@angular/core';
  import { RouterLinkActive } from '@angular/router';
  
  @Component
  ({
      selector    : 'navbar',
      templateUrl : './navbar.component.html'
  })
  

  navbar.component.html（你的导航栏html就在这里）

  <ul>
          <li routerLinkActive="active"><a routerLink="route1" >Route1      </a></li>
          <li routerLinkActive="active"><a routerLink="route2" >Route2      </a></li>
          <li routerLinkActive="active"><a routerLink="route3" >Route3      </a></li>  
     </ul>
  

  然后将导航栏组件嵌入路由器插座上方：

  <navbar></navbar>
  <router-outlet></router-outlet>
  

  我在这里有一个5角种子项目：

  https://github.com/oneinazillion/landing-page

  回复于 2024-04-30T01:51:03+08:00