如何在Angular 2中使用外部Web組件？

Question

我試圖弄清楚如何在我的應用程序中使用其他人（在我的應用程序外部）開發的Web組件。 我有一個我想在AppWithComponent中使用的有用組件。 有用的組件（UsefullComponent.js）存儲在名為“ componentsLib”的目錄中，而我的應用程序代碼存儲在名為“ myApp”的目錄中。 我也有index.html，其中導入了“ myApp”。 整個程序都可以編譯（我使用TypeScript），但是在運行時出現錯誤“ GET http://127.0.0.1:8080/componentsLib/UsefullComponent 404（未找到）”。 有什么想法我做錯了嗎？

這里的代碼

UsefullComponent.ts

import {bootstrap, Component, FORM_DIRECTIVES, 
   CORE_DIRECTIVES, Input} from 'angular2/angular2';

@Component({
    selector: 'usefull-component',
    providers: [],
    template: `
        <div>
            <h2>My manifesto</h2>
            <h3>{{manifesto}}</h3>
        </div>
        `,
    styleUrls: [],
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class UsefullComponent { 
    public manifesto: string = 'I am a very usefull component';
}

AppWithComponent.ts

import {bootstrap, Component, FORM_DIRECTIVES, 
        CORE_DIRECTIVES, provide} from 'angular2/angular2';
import {UsefullComponent} from '../../componentsLib/UsefullComponent';

@Component({
    selector: 'my-app-with-comp',
    providers: [UsefullComponent],
    template: `
        <div>
            <h1>I use components</h1>
            <usefull-component></usefull-component>
        </div>
        `,
    styleUrls: [],
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, UsefullComponent]
})
class AppWithComponent { 
    public niceComponent: UsefullComponent;

    constructor(inComponent: UsefullComponent) {
        this.niceComponent = inComponent;
    }
}
bootstrap(AppWithComponent);

的index.html

<html>
<head>
<title>Components</title>
<script src="../node_modules/es6-shim/es6-shim.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

<script>
System.config({
        packages: {'myApp': {defaultExtension: 'js'}}
});
      System.import('myApp/myAppWithComp');
</script>
</head>
<body>
<my-app-with-comp>loading...</my-app-with-comp>
</body>
</html>

Answer 1

據我所知，我們應該在文件myApp / myAppWithComp bootstrap（AppWithComponent）; bootstrap（UsefullComponent）;中添加以下兩行：
並刪除bootstrap（AppWithComponent）; 從文件AppWithComponent.ts

並在index.html文件中添加<div>標記，如下所示

 <body><div><my-app-with-comp>loading...</my-app-with-comp></div></body>

Answer 2

我在您的代碼中看到的唯一錯誤是組件庫的路徑。 檢查是否在/componentsLib/UsefullComponent.js中放置了有用的Component.js

如何在Angular 2中使用外部Web組件？

問題描述

2 個解決方案

解決方案1
1 2016-02-17 10:39:50

解決方案2
0 2015-12-23 06:59:18

如何在Angular 2中使用外部Web組件？

問題描述

2 個解決方案

解決方案1 1 2016-02-17 10:39:50

解決方案2 0 2015-12-23 06:59:18

解決方案1
1 2016-02-17 10:39:50

解決方案2
0 2015-12-23 06:59:18