Question

您能否告诉我为什么路由在Angular 2中不起作用？我尝试在路径为空白时加载组件。

这是我的代码：

http://plnkr.co/edit/Vgc2bB7Lc8h9XsuhIg6X?p=preview

import { NgModule,Component }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';


import { AppComponent }   from './app.component';


const routes =[
  {
    path :'' ,component:HomeComponent
  }
  ];


@Component({
  selector: 'home',
  template: '<h1>home</h1>'
})
export class HomeComponent { }

@NgModule({
  imports:      [ BrowserModule,RouterModule.forRoot(routes)],
  declarations: [ AppComponent,HomeComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule 
{ }

Answer 1

您的代码存在一些问题：

需要设置base href，如here所述。通常，这看起来像：
<base href="/">
然而，为了让你的掠夺者工作，你需要的是： <script>document.write('<base href="' + document.location + '" />');</script>。
您需要将HomeComponent的声明移至您在路线定义中使用它之前的位置。

更新了plunker here。

Answer 2

检查控制台是否有错误，我认为没有基本的href标记导致此错误。 引起：index.html中没有设置基本href。请提供APP_BASE_HREF令牌的值或向文档添加基本元素。

 <script>document.write('<base href="' + document.location + '" />');</script>

在你的app.module.ts中没有家庭组件。

import { AppComponent }   from './app.component';
import { HomeComponent } from './app.home-component';

const routes =[
  {
    path :'' ,component:HomeComponent
  }
  ];

为什么路由在Angular 2中不起作用？

2 个答案: