Question

我有一个带有菜单的html模板。我将此模板放在index.html文件夹下的/src中，并且希望将菜单中的每个菜单元素链接到angular component。这是菜单：

<ul class="sidebar-menu" data-widget="tree">

<!-- Menu Items Start -->
        <li class="active treeview">
            <a href="#">
                <i class="fa fa-project-diagram"></i> <span> Projects</span>
            </a>
        </li>

        <li class="active treeview">
            <a href="#">
                <i class="fa fa-tv"></i> <span>Applications</span>
            </a>
        </li>

<!-- /Menu Items End -->

</ul>

 <div class="content-wrapper">

      <app-root></app-root>

 </div>

如何将菜单中的每个元素链接到其组件？

我尝试过：

<a routerLink="app/projects/projects.components.html">

但它不起作用。

Answer 1

您必须为项目实现路由。请参考下面的角路由教程以获取详细说明link

创建一个称为路由的新模块 app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectComponent } from './projects/projects.components';


const routes: Routes = [
  { path: 'project', component: ProjectComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

将文件导入app.module.ts

import { AppRoutingModule } from './app.routing.module';


@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],

和您的路由器链接如下所示

<a routerLink="project">

在app.component.html中添加以下代码。

<app-header></app-header> //This is new header component selector
<router-outlet></router-outlet>

创建新的组件标题，然后在html中的html中添加导航代码。

<li class="active treeview">
            <a routerLink="project">
                <i class="fa fa-project-diagram"></i> <span> Projects</span>
            </a>
        </li>

        <li class="active treeview">
            <a href="#">
                <i class="fa fa-tv"></i> <span>Applications</span>
            </a>
        </li>

href链接到index.html中的组件

1 个答案: