卡在angular2（RC1）路由上

JasonGenX 发表于 Dev

杰森

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

主要

   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都会加载。

我究竟做错了什么？

阿卜杜勒·拉赫曼·阿索耶（Abdulrahman Alsoghayer）

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

其次，AppComponent是负责路由的组件，因此您无法路由回去。您将有循环。因此，您需要为main route设置另一个组件/。

无论如何，这是您的代码进行了编辑以使其正常工作，请检查以下问题：

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

另外，请检查此小路，您只需删除前往的路线/并保留/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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。