Angular中的参数周围的花括号

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

而不是像添加一个对象

const dataItem = {test: "test"};

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

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

花括号只是一个对象。

Answer 2

它被称为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;
}