Angularjs 卡在角度2（RC1）布线上

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

应用程序组件.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{}

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

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

})


export class HowdyComponent{}

   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”路由加载howdy.component

现在，无论使用何种路由，app.component都会加载

我做错了什么

您需要添加

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

在main.ts文件中，您需要添加

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

---

在main.ts文件中，丢失路由器出口可能是原因。

---

始终首先加载AppComponent，

/invite

将填充在路由器出口中

缺少路由器出口，这可能是原因。

---

AppComponent总是先加载，

/invite

将被塞进路由器出口

首先，您必须在某个地方标记一个位置来呈现组件内容。否则，你不会把它们放在任何地方。记住，这是一个单页应用程序，不像静态页面。与静态页面不同，SPA有一个单一的起点。在您的例子中，它是

main.ts

，它总是引导到

AppComponent

其次，

AppComponent

是负责路由的组件，因此不能路由回它。你将有一个循环。因此，您需要为主路由设置另一个组件

/

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

---

另外，无论您选择哪种方法，都不要忘记在

index.html

中添加

，首先，您必须在某个地方标记一个位置来呈现组件内容。否则，你不会把它们放在任何地方。记住，这是一个单页应用程序，不像静态页面。与静态页面不同，SPA有一个单一的起点。在您的例子中，它是

main.ts

，它总是引导到

AppComponent

其次，

AppComponent

是负责路由的组件，因此不能路由回它。你将有一个循环。因此，您需要为主路由设置另一个组件

/

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

---

另外，无论您选择哪种方法，不要忘记在

index.html

中添加

，我看不到您在任何地方配置了角组件路由器。。请参阅使用Angular2设置路由器，您可能会遇到。尝试在根组件中添加routerLink。我看不到您在任何地方配置了角组件路由器。。请参阅使用Angular2设置路由器，您可能会遇到。试着在你的根组件中添加一个routerLink。这是测试版，问题是它显然是rc.x。它应该是从“@angular/ROUTER”导入{ROUTER_PROVIDERS}”和

从“@angular/common”导入{APP_BASE_HREF}不幸的是，这并没有什么不同。这是测试版，问题是它显然是rc.x。它应该是从“@angular/ROUTER”导入{ROUTER_PROVIDERS}”和
从“@angular/common”导入{APP_BASE_HREF}不幸的是，这对你的帮助没有任何影响@RM1970很高兴我能注意到“守护神”。谢谢@RM1970，这意味着感谢你的帮助@RM1970很高兴我能注意到“守护神”。谢谢@RM1970，这意味着很多
@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{}