Angular2与Haml

在Angular 2中可以使用HAML作为模板引擎吗？Angular2与Haml

在Angular 2（版本2.3.1）中，您可以使用scss/sass而不是css。这是angular-cli与--style的给定选项。对于模板，cli只允许通过设置--inline-template来改变内联模板。

除非是支持了，我怎么有配置我的角2个应用程序（由角CLI版本1.0.0-beta.26创建）写HAML，把它编译成HTML，并使用HTML在component作为templateUrl？

编辑 Angular/cli使用webpack。我不知道如何配置webpack以在将所有东西捆绑在一起之前将haml呈现给html。如何在Angular中使用haml-loader？

它应该是可能的，但只能使用外部模板文件（templateUrl）。你必须建立你的建筑系统（webpack，gulp）来预处理所有的模板，然后才能使用它们。

2017-01-24 17:03:40

它应该是，不回答我如何配置它，做它 – DenniJensen

是的，这绝对有可能。如果您正在使用angular-cli，则首先需要访问webpack.config.js文件。你可以通过键入

$ ng eject

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

对于HAML可以在webpack.config.js使用haml-haml-loader

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

然后在你的模块的规则文件添加以下规则：

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运行

2017-03-22 14:42:09 kbjerring

你试过吗？我担心HAML会干扰Angular的模板语法并预处理结构指令 –

是的，我已经尝试过，它工作得很好。结构指令本身不是问题。我唯一恢复为HTML的情况是没有关联值的指令，例如：

Something

或

。但是由于haml-haml-loader允许在haml模板中使用普通的html，所以对我来说这不是一个问题。 HAML语法如％div {* ngFor：“let item of items”}等工作正常。 – kbjerring

吓坏了！爱它。 – Plankton

回答