Angular 2 与 Jade 模板答案

【问题标题】：Angular 2 with Jade TemplateAngular 2 与 Jade 模板
【发布时间】：2017-09-19 01:47:18
【问题描述】：

我有一个使用以下技术开发的大型 Web 应用程序：

网络服务器：Node.js + Express
模板引擎：Jade
css 引擎：更少
客户端框架：AngularJS (v. 1.x)
数据库：MongoDB

我非常有兴趣切换到 Angular 2 并使用 Angular 2 Universal 以利用服务器端渲染。

自从我使用 John Papa 的风格指南开始项目以来，（理论上）升级到 Angular 2 不会有太大的麻烦。

我现在没有解决的问题是在Angular 2的组件模板中使用Jade。

例子：

@Component({
  selector: 'todo-app',
  template: `
    <h2>Todo</h2>
    <span>{{remaining}} of {{todos.length}} remaining</span>
    [ <a href="javascript: false" (click)="archive()">archive</a> ]
    <todo-list [todos]="todos"></todo-list>
    <todo-form (newTask)="addTask($event)"></todo-form>`,
  directives: [TodoList, TodoForm]
})

我想将 Jade 而不是 html 放在模板中。

您对此有什么建议吗？有人知道吗？

【问题讨论】：

标签： angular pug server-side-rendering

【解决方案1】：

使用 Webpack raw-loader 和 jade-html-loader 加载器：

loaders: [
  { test: /\.jade$/, loader: 'raw!jade-html' },
  // ...
]

你可以这样做：

@Component({
  selector: 'todo-app',
  template: require('./todo-app.jade'),
  directives: [TodoList, TodoForm]
})

【讨论】：

使用 Jade 时，您应该注意 html2jade.org 是小写属性，请参阅 github.com/donpark/html2jade/issues/102 和 WebStorm Jade 解析器不适用于 angular2 语法 youtrack.jetbrains.com/issue/WEB-19625

【解决方案2】：

你可以试试

@Component({
    templateUrl: '/path/to/your/template`
)}

这应该会读取您的模板，如果您将其转换为 HTML，则应该没有问题。

【讨论】：

【解决方案3】：

我添加了一个路由来表达，它查找部分然后呈现响应。这很容易使用渲染引擎，而不仅仅是使用翡翠文件进行响应。注意：我正在使用 body-parser 来获取请求参数中请求的单个模板文件。

这是我的组件定义：

@Component({
  selector: 'my-app',
  directives: [CoffeeShopsComponent],
  templateUrl: '/partials/app.component.jade'
})

这是我的快速路线定义：

app.get('/partials/*', function(req, res) {
  console.log(req.params);
  res.render('../partials/' + req.params[0]);
});

将 '../partials/' 替换为相对于视图目录的部分目录的路径。

【讨论】：

如果我错了，请纠正我，但是，即使我发现这个答案非常酷，我肯定会使用这种方法，但我们仍然有以下问题，例如，如果你想实现一个 ngFor 或模板内的 ngModel 不会以这种方式可行吗？或者至少在代码片段中没有显示如何实现这样的目标......
*ngFor 或 ngModel 将被翡翠编译器留在模板中。然后 Angular 会看到 ngFor 并复制 html。

【解决方案4】：

tomaszbak 的答案适用于 Webpack。

如果您使用 Gulp 之类的构建工具，那么您可能会将内容编译到某种构建目录中（类似于 www 或 app 文件夹）。如果是这种情况，您可以在组件的templateUrl 部分指定编译模板的路径：

@Component({
  selector: 'login-page',
  templateUrl: 'app/templates/app.html'
})

【讨论】：