Question

如何管理angular2中的嵌套链接。

例如。我有两个文件：

app.component.ts

import { Component, forwardRef } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS}    from 'angular2/http';
import 'rxjs/Rx';

import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { TestComponent } from './test.component';
import { HeroDetailComponent } from './hero-detail.component';
import { LinkComponent } from './link.ts'


@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <link111></link111>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES, forwardRef(() => LinkComponent)],
  providers: [
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    HeroService
  ]
})
@RouteConfig([
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
  },
  {
    path: '/detail/:id',
    name: 'HeroDetail',
    component: HeroDetailComponent
  },
  {
    path: '/heroes',
    name: 'Heroes',
    component: HeroesComponent
  },
  {
    path: '/test',
    name: 'Test',
    component: TestComponent
  }
])
export class AppComponent {
  title = 'Tour of Heroes';
}

link.ts

import {Component} from 'angular2/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
    selector:'link111',
    template:`
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Heroes']">Heroes</a>
          <a [routerLink]="['Test']">Test</a>
        </nav>  
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
export class LinkComponent {
}

当 [routerLink] 在app.component.ts中定义代替 link111 标记时，它可以正常工作，但当我将其分成不同的文件时，它不会工作

请帮帮我，谢谢。

Answer 1

当[routerLink]在app.component.ts中定义代替link111标签时，它起作用，因为角度看起来路由来自主根文件（在您的情况下是app.ts），但是当您将其分成不同的文件时，它不起作用，因为而路由是在根文件中定义的，但是你是从childern调用的（即不是来自父类）。所以要解决这个问题改变这个 -

      <a [routerLink]="['./Dashboard']">Dashboard</a>
      <a [routerLink]="['./Heroes']">Heroes</a>
      <a [routerLink]="['./Test']">Test</a>

因为如果路由以./开头，路由器将从应用程序的根目录查找当前组件的childern路由。

来自官员 -

第一个路径名称应以/，。/或../为前缀。如果路由以/开头，则路由器将从应用程序的根目录查找路由。如果路由以./开头，则路由器将查找当前组件的子路由。如果路由以../开头，路由器将查看当前组件的父节点。

了解更多信息请参阅 -

angular2中的嵌套路由无法正常工作

1 个答案: