【问题标题】:Using typescript to create HTML using template使用 typescript 使用模板创建 HTML
【发布时间】:2015-11-10 00:56:36
【问题描述】:

尝试打字稿,我想实现以下目标:

使用 typescript 从服务器获取问题文本和数字并在 DOM 中的某处显示。

目前我有以下 .ts 文件:

class QuestionResponse {
    constructor(public questionText, public questionNumber) {
    }
}
function questioner(question: QuestionResponse) {

    return '<div data-val-id="${QuestionNumber}"> ${QuestionText} </div>';
}

var testQuestion = new QuestionResponse("Question text number 5", 5);

//this will be replaced by .innerHTML of some element:
alert(questioner(testQuestion));

这不会用 question.QuestionNumber... 或 Text 替换 ${QuestionNumber}。我不想使用字符串追加,我想使用干净的 html,最好是在单独的 .html 文件上。

基本上我在问: 是否可以使用打字稿,如果可以,如何使用? 如果不是,那么使用 angularjs 实现这一目标的最佳实践方法是什么? (但仍在使用打字稿)

【问题讨论】:

  • 为了使用字符串模板功能,您必须使用反引号(与 ~ 相同的键)而不是单个刻度 '

标签: javascript angularjs typescript dynamic-html


【解决方案1】:

正确的语法是:

function questioner(question: QuestionResponse) {
    return `<div data-val-id="${question.questionNumber}"> ${question.questionText} </div>`;
}

这里的重要部分是使用 `(反引号/反引号)
用 ` 代替 " 和 ' 包装您的字符串,以利用 ${} 语法。

这是一个 TypeScript(和 ES6)功能。

【讨论】:

  • K tnx,成功了,是否可以在外部 html 文件上使用这个 ...html...
  • 您只能在 typescript 或 ES6 中的字符串上下文中使用此功能。但是,如果您使用 IDE,例如 webstorm,它会检测到您正在编写 HTML 字符串,并将“处理”它。同样在 webstorm 中,您可以按 alt+enter 访问其他相关功能。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-06-01
  • 1970-01-01
  • 2016-02-09
  • 2013-06-29
  • 2012-04-23
  • 1970-01-01
  • 2022-06-11
相关资源
最近更新 更多