角度: 多行字符串

我是一个 Angular 2的初学者，我在我的 dev/app.component.ts中写了这段代码:

import {Component} from 'angular2/core';


@Component({
selector: 'my-app',
template: '<h3 (click)="onSelect()"> {{contact.firstName}} {{content.lastName}}</h3>'
})
export class AppComponent {
public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};


public showDetail = false;
onSelect() {
this.showDetail=true;
}
}

当我进入浏览器“ Max Brown 被显示”时，它就工作了。

现在，我想在不同的行上编写模板部分，如下所示:

import {Component} from 'angular2/core';


@Component({
selector: 'my-app',
template: '<h3 (click)="onSelect()">
{{contact.firstName}} {{contact.lastName}}<h3>'
})
export class AppComponent {
public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};


public showDetail = false;
onSelect() {
this.showDetail=true;
}
}

但是我在 Chrome 控制台中得到了这个错误:

Uncaught TypeError: Cannot read property 'split' of undefined
134916 次浏览
小开
最佳答案

用 `(反勾)代替单引号 '包装文本，这样就可以跨越多行。

var myString = `abc
def
ghi`;
小开

这个怎么样？这将围绕新行中的空白处工作。但可能有点不可读，并对性能产生影响。

    let myString =
`multi${""
}line${""
}string`;
小开

使变量如下所示

firstName ='';
lastName = '';
小开

只有当我们想在字符串中添加 n 时，接受的答案才有效，如果我们只想内容在换行符下，而不想在长字符串中添加 n，请像这样在每一行的末尾添加

string firstName = `this is line 1 \
and this is line 2 => yet "new line" are not \
included because they were escaped with a "\"`;


console.assert(firstName == 'this is line 1 and this is line 2 => yet "new line" are not included because they were escaped with a "\"'); // true

注意——确保在下一行(示例中的第二行)的开头没有添加任何制表符和空格

小开 
const multiLineString = [
"I wish, ",
"There was a better way to do this!"
].join();

提交答案