Question

我最近做了this教程，我也从Angular那里做了Hero Editor。我的问题现在是，每次我去“localhost：123 / dashboard”我的Chrome浏览器只显示“Hello World”（“localhost：123”工作正常）。如果我尝试使用Chrome调试脚本，也会发生同样的情况。

修改：我刚上传了我的代码here

我的路由代码：

 @RouteConfig([
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    }, {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    }, {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    }
]),

我在index.html中引用的文件：

<!-- 1. Load libraries -->
    <script src="libs/es6-shim.min.js"></script>
    <script src="libs/system-polyfills.js"></script>
    <script src="libs/shims_for_IE.js"></script>
    <script src="libs/angular2-polyfills.js"></script>
    <script src="libs/system.js"></script>
    <script src="libs/rx.js"></script>
    <script src="libs/angular2.dev.js"></script>
    <script src="libs/router.dev.js"></script>
    <script src="libs/http.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                }
            }
        });
    </script>
    <script>
        System.import('appScripts/boot')
              .then(null, console.error.bind(console));
    </script>

我的boot.ts：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app'
bootstrap(AppComponent);

仪表板组件：

import { Component, OnInit } from 'angular2/core';
import { Router } from 'angular2/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
    selector: 'my-dashboard',
    templateUrl: '/views/dashboard.component.html'
})
export class DashboardComponent implements OnInit {
    heroes: Hero[] = [];
    constructor(private _heroService: HeroService, private _router: Router) { }
    ngOnInit() {
          this._heroService.getHeroes().subscribe(heroes => this.heroes);
        //this._heroService.getHeroes().then(heroes => this.heroes);
    }
    gotoDetail(hero: Hero) {
        let link = ['HeroDetail', { id: hero.id }];
        this._router.navigate(link);
    }
}

Answer 1

这解决了路由问题：

 @Component({
selector: 'pv-app',
templateUrl: '/Views/PvStart.html',
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }), 
HTTP_PROVIDERS
],
pipes: [stringToDatePipe]
})


import {provide} from 'angular2/core'

Answer 2

＆＃34; Hello World！＆＃34;来自配置函数中的Startup.cs ...

        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });

注释掉它应该消除正在显示的文本。

另外，请确保在index.html ...

中将基本元素设置为head标记的第一个子元素

<head>
    <base href="/">

    <title>My Angular 2 App</title>

最后，尝试提供HTML组件对应的绝对路径...

@Component({
    selector: "app",
    templateUrl: "./app/app.component.html",
})

参考：this website

Hello World Error Angular2

2 个答案: