Angularjs에서 문자열 보간 내에서 줄 바꿈을 얻는 방법

Angularjs에서 문자열 보간 내에서 줄 바꿈을 얻는 방법

그래서 아주 간단한 일을 하려고 하는데 막혔어요.저는.String변수와 해당 변수 내에서 줄 바꿈을 설정하여 텍스트의 특정 부분이 새 줄로 이동합니다.

시도해 본 내용:

title: string = "My \n Title";
title: string = "My\ Title";
title: string = "My\
Title";
title: string = "My" + "\n" + "Title";

여러 가지 변형을 시도해 보았지만 작동이 되지 않습니다.제가 바보 같고 뭔가를 놓치고 있는 건가요?

내가 시도해 본 것처럼 중복이 아닙니다.<br/>효과가 없었습니다.

업데이트:

이렇게 브라우저 HTML에 변수가 인쇄되고 있습니다.{{title}}

여기 두 가지 버전이 있습니다.

화이트 스페이스

해결책 1...HTML에서 새 줄을 존중하려면...(백틱 문자열과 함께 작동하거나)'My \ntitle'...

document.getElementById('example').innerHTML = `My
title`;

h1 {
  white-space: pre;
}

<h1 id="example">

</h1>

각도 버전:

<h1 style="white-space: pre;">{{title}}</h1>

HTML Break

두번째 해결책...HTML을 사용하길 원하십니까...

document.getElementById('example').innerHTML = 'My<br />title';

<h1 id="example">

</h1>

바인딩 중 HTML을 허용하려면 ng-bind-html을 사용합니다.

html add 스타일의 경우:

<div style="white-space: pre-line">{{DialogText}} </div>

'\n'을 사용하여 타자기에 새 줄을 추가합니다.

this.DialogText = "Hello" + '\n' + "World";

스택블리츠에서도 동일: https://stackblitz.com/edit/angular-rpoxr5linebreak

읽기 전용을 사용할 수도 있습니다.textarea대신 요소<div아니면<p>원래 문자열의 형식을 유지합니다.

이런 식으로 해봐요

<div ng-bind-html="myMsg"></div>

$scope.myMsg =  `Below is the result:  <br>Successful:1,  <br>Failed:2`  // Use backtick

당신은 옳은 일을 했습니다.그러나 브라우저에서 이 내용을 표시하는 경우 \n은 didley를 의미합니다.

다음을 수행해야 합니다.

title: string = "My<br>Title"

이제 리액트와 같은 화려한 프론트 엔드 도구를 사용한다면 안전하지 않은 HTML을 문자열로 처리해야 합니다.

언급URL : https://stackoverflow.com/questions/47678148/how-to-get-line-break-within-string-interpolation-in-angularjs