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{}

main.ts

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


bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

我想要从简单的路由开始。我喜欢＆＃34; \＆＃34;路由加载app.component和＆＃34; \ howdy＆＃34;路由加载howdy.component。

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

我做错了什么？

Answer 1

缺少路由器插座，可能是原因。 AppComponent总是先加载，/invite将填入路由器插座

Answer 2

首先，你必须在某个地方<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{}

此外，无论您选择哪种方法，都不要忘记在<base href="./">中添加index.html

Answer 3

您需要添加

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

你的main.ts文件中的

卡在angular2（RC1）路由上

3 个答案: