Question

对于练习，我尝试使用AngularJS 2来显示不同的YouTube视频。我知道我所做的是100％正确（或不是），但似乎没有任何内容出现在我的网站上Loading...以外的浏览器。

app.component.ts

import {Component} from 'angular2/core';
import {Config} from './config.service';
import {Video} from '.video';
import {PlayListComponent} from './playlist.component';

@Component({
    selector: 'my-app',
    templateUrl: 'app/ts/app.component.html',
    directives: [PlayListComponent]
})

export class AppComponent {
    mainHeading = Config.MAIN_HEADING;
    videos: Array<Video>;

    constructor() {
        this.videos = [
            new Video(1, "Final Fantasy 7", "jpZ47ppAGf0", "Gameplay of this game");
            new Video(1, "Kingdom Hearts", "7QFYcuzRHSI", "Kingdom Hearts movie");
        ]
    }
}

config.service.ts

export class Config {
    static MAIN_HEADING: string = "My favorite videos";
}

playlist.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'playlist',
    templateUrl: 'app/ts/playlist.component.html'
})

export class PlayListComponent {

}

video.ts

 export class Video {
    id: number;
    title: string;
    videoCode: string;
    desc: string;

    constructor(id: number, title: string, videoCode: string, desc: string) {
        this.id = id;
        this.title = title;
        this.videoCode = videoCode;
        this.desc = desc;
    }
}

app.component.html

<h1>{{ mainHeading }}</h1>
<playlist></playlist>

控制台中的错误消息：

 Failed to load resource: the server responded with a status of 404 (Not Found)
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/.video
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:771:30)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:38)
        at Zone.runTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:431:34)
    Error loading http://localhost:3000/.video as ".video" from http://localhost:3000/app/js/app.component.js

Answer 1

根据错误，您忘记了/

中导入中的app.component.ts

import {Video} from './video';

为什么我的浏览器无法加载我在代码中编写的内容？

1 个答案: