带有打字稿的多行字符串 - Angular2

Question

我是一个angular2初学者,我在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

Answer 1

将文本换行`(反引号)而不是单引号',然后它可以跨越多行.

var myString = `abc
def
ghi`;

Answer 2

仅当我们希望在字符串中添加 \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

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

Answer 3

const multiLineString = [
  "I wish",
  "there were a better way",
  "to do this!",
].join(" ");