我想在非角度网站中使用以下小部件，只需在页面中的任何地方调用标签 <app-root> 多次 . 这意味着每个标签应该是不同的实例 .
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="widget-container">
<h1>{{title}}</h1>
</div>
`,
styles: [`
.widget-container {
width: 40%;
border: 1px solid grey;
}
`]
})
export class AppComponent {
title = 'This is an angular widget';
}
我尝试这样做，采用AOT构建的角度项目，我用它来开发这个简单的小部件，并将脚本文件和css文件导入到另一个非角度站点（使用WAMP） . 但是，它不起作用 .
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SimpleWidget</title>
<base href="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
</head>
<body>
<app-root></app-root>
<app-root></app-root>
<app-root></app-root>
<app-root></app-root>
<app-root></app-root>
<app-root></app-root>
<script type="text/javascript" src="inline.12e8db88bf510206182f.bundle.js"></script>
<script type="text/javascript" src="polyfills.35726d60cdf25fecc5f1.bundle.js"></script>
<script type="text/javascript" src="vendor.4ec6f75eb1fd6ed6bd56.bundle.js"></script>
<script type="text/javascript" src="main.db9607812bd105b9d1c8.bundle.js"></script>
</body>
</html>
实际上，这个 index.html 文件是从角度4的AOT构建生成的html文件 . 无论如何，这个html文件可以在drupal或wordpress上 . 任何人都可以描述如何实现这一要求吗？