我可以一起使用 angular2 和 Thymeleaf 吗? [英] can I use angular2 and Thymeleaf together?

查看:35
本文介绍了我可以一起使用 angular2 和 Thymeleaf 吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将 Thymeleaf th: 放在 angular2 模板中,但 th: 不会编译.有什么办法可以一起使用它们吗?

从@angular/core"导入 {Component, NgModule}从@angular/platform-b​​rowser"导入 {BrowserModule}@成分({选择器:'我的应用',模板:`<表 xmlns:th="http://www.w3.org/1999/xhtml"><tr><th>用户名</th><th th:each="role : ${roles}"><div class="row"><div th:text="${role.type}"></div>

</th></tr></tbody></table>`,})导出类 App {}

解决方案

您将两个前端框架混合在一起.Angular 是在客户端处理的前端框架,另一方面 Thymeleaf 在服务器端处理.

您有两个选择:

  • 同时使用 Angular 和(例如)Spring,您将在其中使用 RESTAPI 将数据从后端公开到 Angular(前端),然后您将使用 *ngFor 指令.

  • 将 Thymeleaf 与 Spring MVC 或 Spring Webflow 等框架结合使用等(在这里也可以使用 Angular 但你必须知道Thymeleaf 是在服务器端处理的,所以你不能把Thymeleaf 代码到 JavaScript 文件并期望它得到处理).

I put the Thymeleaf th: in angular2 templates, but the th: wont compile. Is there any way I can use them together?

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
     selector: 'my-app',
     template: `
     <table xmlns:th="http://www.w3.org/1999/xhtml">
         <tbody>
            <tr>
                <th>User Name</th>
                <th th:each="role : ${roles}">
                   <div class="row">
                       <div th:text="${role.type}"></div>
                   </div>
                </th>
            </tr>
        </tbody>
    </table>`,
    })
export class App {}

解决方案

You're mixing two frameworks for frontend together. Angular is frontend framework processed at client side, on the other hand Thymeleaf is processed server side.

You have two options:

  • Use Angular and (for example) Spring together, where you'll use REST API to expose data from backend to Angular (frontend), and then you'll use *ngFor directive.

  • Use Thymeleaf with frameworks such as Spring MVC or Spring Webflow etc. (It's also possible to use Angular here but you have to know that Thymeleaf is processed server side, so you can't put Thymeleaf code to JavaScript file and expect that it gets processed).

这篇关于我可以一起使用 angular2 和 Thymeleaf 吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆