带有Haml的Angular2答案

【问题标题】：Angular2 with Haml带有Haml的Angular2
【发布时间】：2017-01-24 16:59:17
【问题描述】：

是否可以在 Angular 2 中使用 HAML 作为模板引擎？

在 Angular 2（版本 2.3.1）中，您可以使用 scss/sass 代替 css。这是angular-cli 和--style 给定的选项。对于模板，cli 只允许通过设置--inline-template 在内联模板之间进行切换。

除非支持，否则我必须如何配置我的 Angular 2 应用程序（由 angular-cli 版本 1.0.0-beta.26 创建）编写 HAML，将其编译为 HTML 并使用 HTML 在component 作为templateUrl?

编辑 Angular/cli 使用 webpack。我不知道如何配置webpack 以在捆绑所有内容之前将haml 渲染为html。如何在 Angular 中使用 haml-loader？

【问题讨论】：

【解决方案1】：

是的，这绝对是可能的。如果您使用 angular-cli，您首先需要访问 webpack.config.js 文件。您可以通过键入来做到这一点

$ ng eject

这将公开您需要编辑的配置文件。请注意，在此之后，您需要使用“npm start”而不是“ng serve”来启动服务器。

对于haml，您可以使用haml-haml-loader

npm install haml-haml-loader --save-dev

然后在 webpack.config.js 文件中的模块规则下添加以下规则：

module: {
  rules: [
    ...
    {
      test: /\.haml$/, 
      loaders: ['haml-haml-loader']
    },
    ...

最后修改您的组件以通过以下方式使用您的“haml”文件：

@Component({
  selector: 'app',
  template: require('./app.component.haml'),
  styleUrls: ['./app.component.sass'],
})

你也可以使用

templateUrl: './app.component.haml',

这应该让你开始使用 haml

【讨论】：

你试过了吗？我担心 HAML 会干扰 Angular 的模板语法并预处理掉结构指令
是的，我试过了，效果很好。结构性指令本身不是问题。我恢复为 HTML 的唯一情况是没有关联值的指令，例如：
Something
或
。但是由于 haml-haml-loader 允许在 haml 模板中使用普通的 html，所以这对我来说并不是一个真正的问题。 %div{ *ngFor: "let item of items" } 等 HAML 语法可以正常工作。
属性绑定怎么样？例如
?

【解决方案2】：

应该可以，但只能使用外部模板文件 (templateUrl)。你必须设置你的构建系统（webpack，gulp）来预处理所有模板，然后它们将被 angular 使用

【讨论】：