Angular 7 属性绑定

17 Mar 2025 | 阅读 2 分钟

在 Angular 7 中，属性绑定用于将数据从组件类 (component.ts) 传递到用户端 (component.html) 并设置给定元素的值。

属性绑定是单向数据绑定的一个例子，其中数据从组件传递到类。

属性绑定的主要优点是它有助于您控制元素的属性。

例如

我们将在 "component.html" 页面添加一个按钮。

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary">Add Server</button>

component.ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-server2',
  templateUrl: './server2.component.html',
  styleUrls: ['./server2.component.css']
})
export class Server2Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

输出

让我们看看属性绑定是如何工作的？

首先，我们将使用 disabled 属性禁用该按钮。

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary" disabled>Add Server</button>

现在，该按钮已被禁用。

让我们在 "component.ts" 文件中添加一个新属性 "allowNewServer"，它将在特定的（可设置的）时间后自动禁用该按钮。

component.ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-server2',
  templateUrl: './server2.component.html',
  styleUrls: ['./server2.component.css']
})
export class Server2Component implements OnInit {
 allowNewServer = false;

  constructor() {
    setTimeout(() =>{
      this.allowNewServer = true;
    }, 5000);
  }

  ngOnInit() {
  }

}

component.html 文件

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="allowNewServer">Add Server</button>

在这里，我们设置了 5000 毫秒或 5 秒的时间。 5 秒后，按钮将自动禁用。

这是一个属性绑定的例子，其中一个属性被动态绑定。

输出

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="!allowNewServer" >Add Server</button>

通过使用上面的代码，您可以在 5 秒后自动允许禁用该按钮。

属性绑定 vs. 字符串插值

我们可以使用属性绑定以及字符串插值来进行数据绑定。例如，让我们在上面的例子中添加字符串插值。

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="!allowNewServer" >Add Server</button>
<h3>{{allowNewServer}}</h3>

在这里，<h3>{{allowNewServer}}</h3> 指定了字符串插值。

输出

我们也可以使用属性绑定来完成相同的任务。

示例

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="!allowNewServer" >Add Server</button>
<h3 [innerText]= "allowNewServer"></h3>

输出

它也会给你同样的结果。