Question

我正在学习角度2中的路由，在我的根应用程序组件中，我使用template配置属性来显示视图中的导航链接。

app.component.cs

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
              <div style="padding:5px">
              <ul class="nav nav-tabs">
                <li routerLinkActive="active">
                 <a routerLink="home">Home</a>
                </li>

                 <li routerLinkActive="active">
                  <a routerLink="employees">Employees</a>
                 </li>

              </ul>
               <br/>
              <router-outlet></router-outlet>
             </div>
              `
})
export class AppComponent {
}

如果我有更多的链接，上面看起来不干净和可维护，那么我可以使用templateUrl属性，并将所有路由器导航链接放在单独的html文件中吗？如下所示。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl:'/app/home/navigation_template.html' 
})
export class AppComponent {
}

navigation_template.html

<div style="padding:5px">
 <ul class="nav nav-tabs">
   <li routerLinkActive="active">
    <a routerLink="home">Home</a>
   </li>                

   <li routerLinkActive="active">
      <a routerLink="employees">Employees</a>
   </li>                  

  </ul>
   <br/>
   <router-outlet></router-outlet>
</div>

我已经尝试了但是它不起作用，我得到错误说：

InternalError：过多的递归堆栈跟踪：

Answer 1

对于angular 2及更多，最好的方法是创建一个特定的路由配置文件。

我创建了app-routing.module.ts

import { RouterModule, Routes }     from '@angular/router';

/ Redirection route
const routes: Routes = [
    {
        path: '',
        redirectTo: '/homePage',
        pathMatch: 'full'
    },
    {
        path: 'employees',
        component: EmployeesComponent,
    }];


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

export class AppRoutingModule {}

然后，您可以导入AppRoutingModule并单击

<a routerLink="employees">Employees</a>

您将导航到正确的页面。

别忘了把

<base href="/">

在你的index.html文件中的

告诉路由器这是基本URL

在外部html模板中使用routerLink

1 个答案: