Question

看一些Angular代码：

    @Component({
      selector: 'my-app',
      templateUrl: 'kendoGrid.component.html'
    })
    export class AppComponent implements OnInit {

        public editDataItem: Product;
        public isNew: boolean;
        private editService: EditService;    

        public editHandler({dataItem}) { // What does wrapping a parameter in curly braces do?
            this.editDataItem = dataItem;
            this.isNew = false;
        }
    }

当我尝试在Angular的上下文中用参数谷歌花括号/胡须时，找不到太多结果。将参数包装在Angular中的花括号中会产生什么效果？

谢谢。

Answer 1

它被称为destructuring，它的工作方式如下：

假设您有一个包含一个人的姓名和年龄的对象：

const person = {
    name: "John Doe",
    age: 42
};

您有一个函数可以打印出传递给它的对象的age：

function printAge(obj) {
    console.log(obj.age);
}

此函数使用整个对象-但是，由于我们实际上不需要该对象的其他属性（仅需要age），因此可以使用解构来提取该属性：

function printAge({ age }) {
    console.log(age);
}

这是ES6的简写：

function printAge(obj) {
    var age = obj.age;
    console.log(age);
}

因此，此功能的所有作用：

public editHandler({ dataItem }) {
    this.editDataItem = dataItem;
    this.isNew = false;
}

这是ES5：

public editHandler(item) {
    var dataItem = item.dataItem;
    this.editDataItem = dataItem;
    this.isNew = false;
}

Answer 2

代替添加类似对象

const dataItem = {test: "test"};

并将其传递给函数，在ES6中，我们可以直接传递一个对象，如下所示。

public editHandler({test: "test"}) { 
        this.editDataItem = test;
        this.isNew = false;
    }

大括号不过是一个对象。

在Angular中的参数周围花括号

2 个答案: