В Angular 2 ввод скрытого свойства относится к методу, который позволяет передавать данные между компонентами без явной привязки их к шаблону. Это полезно, если вы хотите обмениваться данными между компонентами, не отображая их пользователю. В этой статье мы рассмотрим различные методы использования ввода скрытых свойств в Angular 2, а также примеры кода.

Метод 1: привязка ввода
Один из способов добиться ввода скрытых свойств в Angular 2 — использовать привязку ввода. Отметив свойство декоратором @Input, вы можете передать данные из родительского компонента в дочерний компонент.

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child [hiddenProperty]="data"></app-child>
  `
})
export class ParentComponent {
  data: any = 'Hidden Data';
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ hiddenProperty }}</p>
  `
})
export class ChildComponent {
  @Input() hiddenProperty: any;
}

Метод 2: ViewChild
Другой метод достижения скрытого ввода свойств — использование декоратора @ViewChildдля прямого доступа к свойствам дочернего компонента. Это позволяет родительскому компоненту устанавливать значения в дочернем компоненте, не раскрывая их в шаблоне.

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  ngAfterViewInit() {
    this.childComponent.hiddenProperty = 'Hidden Data';
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ hiddenProperty }}</p>
  `
})
export class ChildComponent {
  hiddenProperty: any;
}

Метод 3: Сервис
Использование сервиса — это еще один подход к обеспечению скрытого ввода свойств. Служба выступает посредником между компонентами и позволяет им обмениваться данными, не раскрывая их шаблонам.

// Shared Service
@Injectable()
export class DataService {
  hiddenProperty: any;
}
// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="setData()">Set Hidden Data</button>
  `
})
export class ParentComponent {
  constructor(private dataService: DataService) {}
  setData() {
    this.dataService.hiddenProperty = 'Hidden Data';
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ dataService.hiddenProperty }}</p>
  `
})
export class ChildComponent {
  constructor(private dataService: DataService) {}
}

Скрытый ввод свойств в Angular 2 позволяет передавать данные между компонентами, не раскрывая их в шаблоне. Мы рассмотрели три метода: привязку ввода, ViewChild и использование службы. Каждый метод предлагает свои преимущества в зависимости от конкретного варианта использования. Используя эти методы, вы можете эффективно обмениваться данными, сохраняя при этом чистую и организованную кодовую базу в приложениях Angular 2.