如何使用 TypeScript 换行答案

【问题标题】：How to break line with TypeScript如何使用 TypeScript 换行
【发布时间】：2020-09-07 03:06:06
【问题描述】：

我是 Angular 的新手，我正在尝试做一个随机报价生成器。我从教程中得到启发，到目前为止一切都很好，但我想在引用和作者之间添加一个换行符。

我有什么：

不要让昨天占据今天太多。 - 威尔罗杰斯

我想要什么：

不要让昨天占据今天太多。
威尔罗杰斯

到目前为止，我的 app.component.ts 中有这段代码：

quotes = [
'The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees The Opportunity In Every Opportunity',
"Don\'t Let Yesterday Take Up Too Much Of Today. -Will Rogers",
'You Learn More From Failure Than From Success. Don\'t Let It Stop You'
]
 getNewQuote() {
    const quoteText = document.querySelector('.quote-text');
    this.randomNumber = Math.floor(Math.random() * (this.quotes.length));
    quoteText.textContent = this.quotes[this.randomNumber];
    quoteText.textContent = this.quotes[this.randomNumber].split("-");
  }

我试过了

quoteText.textContent = this.quotes[this.randomNumber].split("-");

但这只是给我：

不要让昨天占据今天太多。 , 威尔罗杰斯

我用打字稿寻找换行符，但我所做的都没有奏效。我该怎么做？

【问题讨论】：

重要的是这个文本在哪里结束。我认为它将以 HTML 结尾，在这种情况下，您应该将“-”或其他任何内容替换为“
”。至少这是一种方式。
@user2740650 我已经尝试过了，但它不起作用
我刚刚意识到您正在明确设置textContent。这不会解释 HTML。您可以改为设置innerHTML，并使用我所说的<br>。但是，我怀疑您没有按照预期的方式使用 Angular。您通常不应该直接操作 DOM 元素。
@user2740650 是的，非常感谢！我把 innerHTML 和它的工作！是的，我使用的是 angular，但确实我没有注意缩进，因为它没有给我任何错误。
你是从某个地方得到你的引号还是你自己设置的？

标签： html angular typescript line-breaks

【解决方案1】：

您正在使用 TypeScript 生成 HTML 页面的内容。因此，您的最终输出应该是 HTML 代码。要在 HTML 中换行，请使用 <br> 标记。

TypeScript 代码生成的输出应该是这样的：

<p>First Line.<br>Second Line</p>

Here 是一些参考。

【讨论】：

好的，现在我明白了，您正在使用 .textContent。请您尝试使用 .innerHTML 吗？它应该可以使用。

【解决方案2】：

只需在要中断引号的位置添加 \n 即可解决。

//By adding \n in the text you can Break the line. Happy Coding!
var test = "Hello\nWorld";
console.log(test);

【讨论】：

【解决方案3】：

如果您是自己设置引号，您可以从一开始就将作者与引号分开。

我不建议使用regexp 或split() 将字符串分块，除非您非常准确地知道在哪里拆分字符串并且它永远不会失败或在错误的位置拆分。

示例

Stackblitz：https://stackblitz.com/edit/angular-ivy-ogfspj?file=src/app/app.component.ts

app.component.ts

import { Component, OnInit } from '@angular/core';

interface Quote {
  quote: string;
  author: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  public quote: Quote;
  private quotes: Quote[];

  ngOnInit(): void { 
    this.quotes = [
      {
        quote: 'The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees The Opportunity In Every Opportunity',
        author: 'unknown'
      }, {
        quote: 'Don\'t Let Yesterday Take Up Too Much Of Today', 
        author: 'Will Rogers'
      }, {
        quote: 'You Learn More From Failure Than From Success. Don\'t Let It Stop You',
        author: 'unknown'
      }
    ]

    this.random_quote()
  }

  private random_quote(): void {
    const index = Math.floor( Math.random() * this.quotes.length );
    this.quote = this.quotes[index];
  }

}

app.component.html

<blockquote>
  <i>{{quote.quote}}</i><br><br>
  - {{quote.author}}
</blockquote>

初学者要点

对于初学者来说，这个例子的主要收获是：

使用接口定义Quote类型，这样会更容易使用
使用{{}}绑定属性
大多数时候你想在ngOnInit生命周期钩子中初始化数据；您可能会在某个时候重构此代码以从服务中获取报价。然后你需要在这个钩子中初始化quote。

【讨论】：