Как изменить родительский компонент?

Изменение родительского компонента в Angular можно осуществить несколькими способами. Вот некоторые из них:

1. Использование свойства входного привязчика (input binding):

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

Ниже пример кода:

Родительский компонент:

// app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <app-child [parentValue]="parentValue"></app-child>
  `
})
export class AppComponent {
  title = 'Parent Component';
  parentValue = 'Initial value';
}

Дочерний компонент:

// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <input [(ngModel)]="childValue" (ngModelChange)="onChildValueChange()">
  `
})
export class ChildComponent {
  @Input() parentValue: string;
  childValue: string = '';

  onChildValueChange() {
    this.parentValue = this.childValue;
  }
}

В примере, родительский компонент AppComponent передает значение parentValue дочернему компоненту ChildComponent. Когда значение childValue меняется в дочернем компоненте, это изменение отражается на parentValue в родительском компоненте.

2. Использование сервисов и инъекции зависимостей:

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

Вот пример кода:

Родительский компонент:

// parent.component.ts

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <button (click)="changeData()">Change Data</button>
  `
})
export class ParentComponent {
  constructor(private dataService: DataService) { }

  changeData() {
    this.dataService.setData('New data');
  }
}

Дочерний компонент:

// child.component.ts

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  constructor(private dataService: DataService) { }

  get data() {
    return this.dataService.getData();
  }
}

Сервис данных:

// data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

В приведенном выше примере, родительский компонент ParentComponent изменяет данные в сервисе DataService с помощью метода setData(). Затем дочерний компонент ChildComponent получает доступ к измененным данным из сервиса при помощи метода getData().

3. Использование событий и декоратора @Output:

Вы также можете использовать события и декоратор @Output для изменения родительского компонента. В дочернем компоненте можно создать событие и отправлять его с новыми данными. Затем родительский компонент может подписаться на это событие и выполнить определенные действия при его возникновении.

Вот пример кода:

Родительский компонент:

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <p>{{ value }}</p>
    <app-child (valueChange)="onChildValueChange($event)"></app-child>
  `
})
export class ParentComponent {
  value = 'Initial value';

  onChildValueChange(newValue: string) {
    this.value = newValue;
  }
}

Дочерний компонент:

// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <button (click)="changeValue()">Change Value</button>
  `
})
export class ChildComponent {
  @Output() valueChange = new EventEmitter<string>();

  changeValue() {
    this.valueChange.emit('New value');
  }
}

В примере, дочерний компонент ChildComponent генерирует событие valueChange, когда пользователь нажимает на кнопку. Родительский компонент ParentComponent подписывается на это событие и изменяет значение value.