Question

我正在设计游戏，并且正在动态创建内部带有空格的语句，并要求玩家填写空格。我需要字符串插值来记录用户的输入，但是我还需要设置动态的innerHTML，因为空格可以在语句中的任何地方。

我知道这听起来很模糊，这是相关的代码示例：

app.component.html

<input type="range" step="1" min="0" max="100" class="slider 
       (input)="sliderMoved($event)">

<div class="question" [innerHTML]="questionStatement"></div>

app.component.ts

display=50;

questionStatement='<div class="percent">{{display}}%</div> 
                   of Americans have a university degree.'

questionStatementExample2='Canada is <div class="percent">{{display}}%</div> 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}

questionStatement在句子中的任何位置都可以有<div class="percent">{{display}}%</div>，因此需要动态入口点。

此处，字符串插值（{{display}}）在innerHTML中不起作用。它会以{{display}}的形式显示在屏幕上。在这种情况下我该怎么办？

Answer 1

Template literals应该可以帮助您。如果您像下面那样修改组件，则应该解决问题。

app.component.ts

display = 50;

questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`

sliderMoved(event: any) {
    this.display=event.target.value;
    this.questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`
}

在Angular的innerHTML中使用字符串插值

1 个答案: