Angular2 中的路由

Question

我正在学习 angular 2，但遇到了一个让我有点困惑的问题。如果我有一个 core 和一个 nav 组件，并且我希望 nav 组件呈现在 core 组件中定义的路由，我该怎么做？

因为现在我已经在我的 core 组件中定义了路由，并在我的 nav 组件模板中放置了一个 [routerLink]="['About']" 属性，但似乎找不到它或者发生了一些错误，因为一旦我添加这个属性指令，它就会导致核心组件无法加载以及半冻结浏览器，就好像它正在执行某种无限循环一样。

我没有收到任何对我没有帮助的错误信息。我已经阅读了 angular2 中的路由文档，但它们只显示了单个组件，而不是在尝试从单独的组件加载 core 组件中定义的路由时。这里可能是什么问题？

core.component.ts:

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {NavComponent} from '../nav/nav.component';
import {AboutComponent} from '../about/about.component';
import {ContactComponent} from '../contact/contact.component';

@Component({
  selector: 'core-app',
  templateUrl: './app/assets/scripts/modules/core/core.component.html',
  styleUrls: ['./app/assets/scripts/modules/core/core.component.css'],
  directives: [NavComponent]
})

@RouteConfig([
  {path: '...', name: 'Home', component: CoreComponent},
  {path: '/about', name: 'About', component: AboutComponent},
  {path: '/contact', name: 'Contact', component: ContactComponent}
])

export class CoreComponent {

}

nav.component.ts:

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
import {NavService} from '../nav/nav-api.service';
import {NAVLIST} from '../nav/nav-list';

@Component({
  selector: 'nav-list',
  templateUrl: './app/assets/scripts/modules/nav/nav.component.html',
  styleUrls: ['./app/assets/scripts/modules/nav/nav.component.css'],
  providers: [NavService],
  directives: [ROUTER_DIRECTIVES],
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()'
  }
})

export class NavComponent {
  public isToggled = false;
  public links = NAVLIST;

  constructor(private _navService: NavService) {}

  show() {
    this.isToggled = this._navService.show();
  }

  hide() {
    this.isToggled = this._navService.hide();
  }
}

nav.component.html:

<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
  <ul class="nav-links">
    <li class="nav-link" *ngFor="#link of links">
      <a [routerLink]="['About']">
        <div class="label-wrapper">{{link.label}}</div>
        <div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
      </a>
    </li>
  </ul>
</nav>

Answer 1

看看这个：{path: '...', name: 'Home', component: CoreComponent},

通过执行 '...' 你是说一些其他组件将解决路径（该组件需要 RouteConfig ）你希望 CoreComponent 处理所有路由，但所有路由都已经通过它。所以你会无限期地重定向到它。

Angular2 中的路由

Routing in Angular2

angular

angular2-routing