Question

我学习如何使用angular2与电子。目前我正在使用最新的角度rc5和最新版本的电子。我决定使用官方角度教程（英雄之旅）。在我开始路由之前，我没有遇到任何重大问题。我必须对路由工作进行一些小改动，例如在index.html中，而不是使用我必须使用的电子支持。我也使用webpack和angular2-materialize。 / p>

我的问题是，当我点击其中一位英雄时，它会显示标题中所述的错误，这是一张图片： error image

这是此特定组件的代码（dashboard.component）

html（dashboard.component.html）：`

  <h3>Top Heroes</h3>
  <div class="grid grid-pad">
  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-  4">
  <div class="module hero">
   <h4>{{hero.name}}</h4>
  </div>
 </div>
 </div>

`

打字稿（dashboard.component.ts）：

 import {Component, OnInit} from '@angular/core';
 import {Hero} from './hero';
 import {HeroService} from './hero.service';
 import {Router} from '@angular/router';

 @Component({
 selector: 'my-dashboard',
 templateUrl: './dashboard.component.html'
 })

export class DashboardComponent implements OnInit {

heroes: Hero[] = [];
constructor(private router: Router,private heroService: HeroService){}
ngOnInit(): void {
    this.heroService.getHeroes().then(heroes => this.heroes =          heroes.slice(1,5));
}

 gotoDetail (hero: Hero): void
 {
 let link = ['/detail',hero.id];
  this.router.navigate(link);   
 }
 }

app.module.ts：

     import { NgModule }      from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { FormsModule }   from '@angular/forms';
     import { AppComponent }  from './app.component';
     import {MaterializeDirective} from "angular2-materialize";
     import {HeroDetailComponent} from './hero-detail.component';
     import {HeroService} from './hero.service';
     import {HeroesComponent} from  './heroes.component';
     import {routing} from './app.routing';
     import {DashboardComponent} from './dashboard.component';

     @NgModule({
     imports: [
     BrowserModule,
     FormsModule,
     routing,
     ],
     declarations: [
        AppComponent,HeroDetailComponent,MaterializeDirective,HeroesComponent,DashboardComponent
     ],
    providers: [HeroService],
    bootstrap: [ AppComponent ],
      })
    export class AppModule { }

的index.html：

<html>
<head>
    <base href="">
    <title>First App</title>
    <!--<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
    <link href="../icons/icon.css" rel="stylesheet">
        <link href="../node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet" />
    <link href="../css/styles.css" rel="stylesheet">
</head>
<body>
    <myapp></myapp>
  <script src="../build/common.js"></script>
  <script src="../build/angular2.js"></script>
  <script src="../build/app.js"></script>
</body>

main.ts：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.routing.ts：

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HeroesComponent} from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';
const appRoutes: Routes = [
{
    path: 'heroes',
    component: HeroesComponent
},
{
    path: 'dashboard',
    component: DashboardComponent
},
{
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
},
{
    path: 'detail/:id',
    component:'HeroDetailComponent'

}

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.component.ts：

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

@Component({
selector: 'myapp',
template: `
<nav>
<div class="nav-wrapper">
      <a href="#" class="brand-logo center">{{title}}</a>

<ul id="nav-mobile" class="left">

<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
`
})

export class AppComponent {
title = 'Tour of Heroes';
}

hero-detail.component.ts：

import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {HeroService} from './hero.service';
import {Hero} from './hero';

@Component({
selector: 'my-hero-detail',
templateUrl: './hero-detail.component.html' 
})

export class HeroDetailComponent implements OnInit {
@Input()
hero: Hero;
constructor(private heroService: HeroService, private route: ActivatedRoute) 
{   
}

ngOnInit(): void 
{
    this.route.params.forEach((params: Params) => {
        let id = +params['id'];
        this.heroService.getHero(id)
            .then(hero => this.hero = hero);
    });
  }
 goBack(): void {
 window.history.back();
 }
 }

英雄detail.component.html

<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
<button (click)="goBack()">Back</button>
</div>

谢谢

Answer 1

您应该在'的组件选项中没有route（单引号）的组件名称。您已经在HeroDetailComponent（rotue配置）中导入了app.routing.ts。

{
   path: 'detail/:id',
   component: HeroDetailComponent //<-- removed quote from here
}

我在查询模板时发现您正在使用file协议，这意味着您尚未在服务器上托管您的应用程序。请在服务器上托管你的应用程序（精简服务器也可以），这样模板就会问超过http协议而不是file。

Angular2 rc5和电子错误 - 无法使用解析组件

1 个答案: