Angular 7 字符串插值

17 Mar 2025 | 阅读 2 分钟

在 Angular 中，字符串插值用于在 HTML 模板（在用户端）上显示动态数据。它方便您在 component.ts 文件中进行更改，并从那里获取数据到 HTML 模板（component.html 文件）。

例如

component.ts 文件

import {Component} from '@angular/core';
@Component(
  {selector: 'app-server',
 templateUrl: 'server.component.html'})
export class ServerComponent {
  serverID: number = 10;
    serverStatus: string = 'Online';
}

在这里，我们指定了 serverID 和 serverStatus 并赋予了一些值。让我们在“component.html”文件中使用它。

component.html 文件

输出

字符串插值 vs 属性绑定

字符串插值和属性绑定都用于相同的目的，即单向数据绑定。但问题是如何知道哪一个最适合您的应用程序。

在这里，我们在相似性、差异、安全性和您收到的输出方面比较两者。

字符串插值和属性绑定的相似性

字符串插值和属性绑定都是关于单向数据绑定的。它们都以一个方向从我们的组件流向 HTML 元素。

字符串插值

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
                <h1>{{ fullName }}</h1>
              `
})
export class AppComponent {
    fullName: string = 'Robert Junior';
}

您可以在上面的示例中看到，Angular 从组件中获取 fullName 属性的值，并使用用于指定插值的大括号将其插入到 <h1> 元素的开始和结束标记之间。

属性绑定

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
                <h1 [innerHtml]='fullName'></h1>
              `
})
export class AppComponent {
    fullName: string = 'Robert Junior';
}

在属性绑定中，查看 Angular 如何从组件中提取 fullName 属性的值，并使用 <h1> 元素的 html 属性 innerHtml 将其插入。

字符串插值和属性绑定的两个示例将提供相同的结果。

字符串插值和属性绑定之间的区别

字符串插值是一种特殊语法，Angular 会将其转换为属性绑定。它是属性绑定的一种方便的替代方法。

当您需要连接字符串时，必须使用插值而不是属性绑定。

示例

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation foe string only';

}

当您必须将元素属性设置为非字符串数据值时，使用属性绑定。

示例

在以下示例中，我们通过绑定到布尔属性 isDisabled 来禁用按钮。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Disable me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

如果您使用插值而不是属性绑定，则无论 isDisabled 类属性值为 true 还是 false，该按钮将始终被禁用。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<div>
    <button disabled='{{isDisabled}}'>Disable Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true/false;
}

下一个主题Angular 7 事件绑定