如何在Angular2中使用多个组件

Question

如何在Angular2中使用多个组件

4

我是一名新手，正在学习 angular2。我试图在单个页面中使用两个组件，但是它给了我一个 404错误。

这是我的两个.ts文件：

app.ts

import {Component, View, bootstrap} from 'angular2/angular2';

import {events} from './event.component';

@Component(
    {
        selector: 'contact'
    })
    @View({

        templateUrl: './Travel Operator/login.html',

        directives: [events]
})

export class Contact {
}

bootstrap(Contact);

以及event.component.ts

import {Component, View, bootstrap} from "angular2/angular2";

@Component(
    {

        selector: 'events'
    })
@View({
        template: '<h1>Hello World</h1>'
})


export class events {

    }
}

bootstrap(events);

我正在尝试将其用于我的主index.html文件中，如下所示：

<html>
<body>
    <h1>First Angular App</h1>

    <div id="content">
        <contact></contact>
    </div>
    <div id="events">
        <events></events>
    </div>

</body>
</html>

但出现了问题

"网络错误：404未找到 - http://localhost:55777/event.component" 错误

我卡在那里，请帮忙解决

- Sanjiv Rajput

这更可能是后端问题，而不是Angular的问题。 - Walfrat

它试图加载http://localhost:55777/event.component而不是http://localhost:55777/event.component.js - Olivier Boissé

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thierry Templier · Accepted Answer

问题在于包含您的事件组件的模块未正确加载。这是您的SystemJS配置的问题。也许您没有将TypeScript文件放在app或src文件夹中。

来自5分钟快速入门（https://angular.io/guide/quickstart）：

var map = {
  'app': 'app', // 'dist',
  (...)
}

var packages = {
  'app': { main: 'main.js',  defaultExtension: 'js' },
  (...)
};

在这种情况下，组件的两个JS文件（由TypeScript转换而来）位于同一个文件夹中（即app文件夹），因此import {events} from './event.component';将在app文件夹中查找event.component.js文件。