如何在angular2中使用multipal组件

Question

我是angular2 ，我试图在单页中使用两个组件，但它给了我404 error 。

这是我的两个.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>

但它给了

“NetworkError：404 Not Found - http：// localhost：55777 / event.component ”错误

我被困在那里请帮忙

Answer 1

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

从5 Min快速入门（ https://angular.io/guide/quickstart ）：

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

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

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

如何在angular2中使用multipal组件

问题描述

1 个解决方案

解决方案1
1 2016-08-08 09:34:38

如何在angular2中使用multipal组件

问题描述

1 个解决方案

解决方案1 1 2016-08-08 09:34:38

解决方案1
1 2016-08-08 09:34:38