Question

我正在使用Ionic / Angular / Typescript编写的项目。在.html文件中，我有

< p> {{stringVar}} </p>

在.ts文件中，我有

this.stringVar= "Visit http://www.google.com. 
                 Visit http://www.stackoverflow.com."

我有两个问题：

1）我希望字符串中的2个句子以不同的行显示在html中。我应该怎么做才能实现这个目标：添加\ n或＆lt; BR＆GT;或类似的东西？

2）我希望字符串中的2个链接也显示为html中的链接。也就是说，当用户点击它们时，他将被带到这些网站。

提前致谢！

Answer 1

1）要显示在不同的行中，您必须将每个标记放在自己的<p>标记中，如下所示：

<p>first line</p>
<p>second line</p>

2）要显示为可点击的链接，您需要输入<a>标记，并在href属性中添加url，如下所示：

<p>click <a href="http://www.google.com/">here</a> to visit google.</p>

如果你可以改变你的数据结构会更好，如下所示：

<p ng-repeat="url in urlList">Visit <a href="url">{{url}}</a></p>

this.urlList = [
    "http://www.google.com",
    "http://www.stackoverflow.com"
];

甚至更好：

<p ng-repeat="site in siteList">Visit <a href="site.url">{{site.name}}</a></p>

this.siteList= [
    { name: "Google", url: "http://www.google.com" },
    { name: "StackOverflow", url: "http://www.stackoverflow.com" }
];

Answer 2

使用＆＃39; 列表＆＃39;的最佳方法，而不是 stringVar

this.linkList = [
    "http://www.google.com",
    "http://www.stackoverflow.com"
];

1）我建议让<p></p>代替<br/>。

2）以下是Angular2的工作样本

<p *ngFor="let link of linkList">Visit <a href="{{link}}">{{link}}</a></p>

在此处查看工作示例：https://embed.plnkr.co/Om3CXpT9xN07YCz2aHQr/

Answer 3

两个问题都有一个回答你基本上想要在角度中插入带有html 的字符串，虽然我不是angular1.x中的专家但是有一个服务用于同一个叫做

 $interpolate(templateString)(you_.ts/js_code);

通过使用它，你可以在你的javascript文件中使用html在网页事件中显示你的字符串。你只需要在你的字符串中传递html并在网页中显示它

例如，假设您的简单用例必须添加如下： -

this.stringVar= "Visit <a href='http://www.google.com'>Google</a> Here and<br> Visit <a href='http://www.stackoverflow.com'>Stackoverflow</a> Here."

并使用像这样的插值转换它

$scope.your_string = $interpolate(templateString)(stringVar);

Working Example for the same

字符串中的链接 - 打字稿

3 个答案: