Фигурные скобки вокруг параметра в Angular - PullRequest
Новая
       14

Фигурные скобки вокруг параметра в Angular

0 голосов
/ 27 мая 2019

Глядя на некоторый код 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?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 27 мая 2019

Это известно как деструктурирование , и оно работает так:

Скажем, у вас есть объект, который содержит имя и возраст человека: 

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;
}
0 голосов
/ 27 мая 2019

Вместо добавления объекта типа 

const dataItem = {test: "test"};

и передачи его функции, в ES6 мы можем напрямую передать объект, подобный приведенному ниже. 

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

фигурные скобкиничего, кроме объекта.

...