0

我有一个 Web 组件，我可以在我的 main.ts 中使用它，这是我的应用程序的入口点。

主要.ts：

import './Components/List/ListComponent'

console.log("Main");

列表组件.ts

export class ListComponent extends HTMLElement {
...
customElements.define("my-list", ListComponent );

我能够将我的代码拆分为 TS 模块。我尝试实现的下一步是为 Web 组件加载 HTML 和 CSS 内容。类似于 Angular 的做法，但使用的是 Vanilla Web Components。我的目标是在 HTML 文件中定义 Web 组件的 HTML 内容，并在 CSS 文件中定义组件的 CSS 样式。

我遵循的教程使用 webpack，我只想用它来解析我的导入（我希望我的 TS 代码与任何捆绑器兼容）

我已经看到我可以通过导入 CSS 文件，import "./css/main.css";但它似乎只适用于 Webpack 的 MiniCssExtractPlugin。同样，对于 Web 组件，样式是全局的，而不是本地的。我可以以类似的方式导入 HTML 文件吗？

是否有“香草”TS 方式来导入 CSS 和 HTML 文件？如果可能的话，我想独立于任何框架和模块加载器。我知道我的结构类似于 Angular，但我只需要基本功能

4

2 回答 2

1

有几种方法可以做到这一点。有用于将任意文件内联为字符串的 babel 插件，或者您可以创建html.d.ts具有以下内容的文件：

declare module '*.html' {
  const value: string;
  export default value
}

然后你可以import html from '. /template.html'从你的MyList.ts

于 2020-05-18T18:09:28.830 回答
-4

你需要了解 JSX。在 react 应用程序模板部分使用 JSX 处理。它非常简单，易于学习和使用。ListComponent此外，仅当您已将其导出为默认值时，您才能导入say，否则请使用 {}。

import ListComponent from './Components/List/ListComponent'

于 2020-05-18T17:42:28.357 回答