Angular 2：带括号和不带括号的属性绑定之间的区别？

发布时间：2020-12-17 07:11:25 所属栏目：安全来源：网络整理

导读：我注意到没有括号可以绑定东西.有什么不同？打字稿： import { Component,Input } from '@angular/core';@Component( { selector: 'my-comp',templateUrl: ` input is {{foo}} `})export class myComponent { @Input() public foo: string; constructor() {

我注意到没有括号可以绑定东西.有什么不同？

打字稿：

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

@Component( {
    selector: 'my-comp',templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML：

情况1

<my-comp [foo]="bar"></my-comp>

案例2

<my-comp foo="bar"></my-comp>

解决方法

一般来说,我们可以说只有当我们有一个固定的字符串属性时才应该使用没有括号的绑定：

“如果满足以下所有条件,则应省略括号：
target属性接受字符串值.
该字符串是一个固定值,您可以将其烘焙到模板中.
这个初始值永远不会改变.
您通常在标准HTML中以这种方式初始化属性,并且它也适用于指令和组件属性初始化. (…)Angular设置它并忘记它.“(…)当将element属性设置为非字符串数据值时,必须使用属性绑定”(来源：https://angular.io/guide/template-syntax).

总而言之,这意味着只有在使用括号时才会解释右侧的值.每当你在右边的引号中看到引号时,你可以删除括号：[anyStringProperty] =“’hello’”可以改为anyStringProperty =“hello”

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!