卡在 angular2 (RC1) 路由上

Question

我是 Angular 的新手，从 Angular 2 开始。我创建了一个框架应用程序（在 npm 的帮助下）。我的应用有两个组件：

app.component.ts

  import { Component } from '@angular/core';
import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
import { InviteComponent } from './howdy.component';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

@Routes([
  { path: '/',          component: AppComponent },
  { path: '/howdy', component: HowdyComponent },

])

export class AppComponent{}

howdy.component.ts

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

@Component({
  selector: 'my-app',
  template: '<h1>Howdy</h1>'

})


export class HowdyComponent{}

ma​​in.ts

   import { bootstrap }    from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router';
import { AppComponent } from './app.component';


bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

我想从简单的路由开始。我想要加载 app.component 的 "\" 路由，以及加载 howdy.component 的 "\howdy" 路由。

现在无论使用什么路由，app.component 都会加载。

我做错了什么？

Answer 1

首先，您必须在某处拥有<router-outlet>，以标记渲染组件内容的位置。否则，您不会将它们放在任何地方。请记住，这是一个单页应用程序，不像静态页面。与静态页面不同，SPA 有一个单一的起点。在您的情况下，它是 main.ts，它始终引导到 AppComponent。

其次，AppComponent 是负责路由的组件，所以不能路由回它。你会有循环。所以，你需要为主路由/设置另一个组件。

无论如何，这是您的代码编辑以使其工作，check this plunk：

import { Component } from '@angular/core';
import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
import { HowdyComponent } from './howdy.component';

@Component({
  selector: 'main-route',
  template: '<h1>My First Angular 2 App</h1>'
})
export class MainComponent{}


@Component({
  selector: 'my-app',
  directives:[ROUTER_DIRECTIVES],
  template: `
      <a [routerLink]="['/howdy']">Howdy</a>
      <a [routerLink]="['/']">Main</a>

      <router-outlet></router-outlet>
  `
})
@Routes([
  { path: '/',          component: MainComponent },
  { path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}

或者，check this plunk，您可以只删除到/ 的路由并保留/howdy 的路由

@Component({
  selector: 'my-app',
  directives:[ROUTER_DIRECTIVES],
  template: `
      <a [routerLink]="['/howdy']">Howdy</a>
      <a [routerLink]="['/']">Main</a>

      <h1>This line will be visible everywhere .. </h1>
      <router-outlet></router-outlet>
  `
})
@Routes([
  { path: '/howdy', component: HowdyComponent }
])
export class AppComponent{}

另外，无论你选择哪种方式，不要忘记在index.html中添加<base href="./">

Answer 2

缺少路由器插座，可能是原因。 AppComponent 总是先加载，/invite 会被塞进 router-outlet

Answer 3

你需要添加

import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
//...
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

在你的 main.ts 文件中