Мы увидели, как создать отдельный компонент и отдельную директиву. Теперь пришло время посмотреть, как нам следует обращаться с сервисами с автономным компонентом.

С автономным компонентом мы сделали его уровнем от модуля к компоненту. следовательно, нам нужно использовать его автономный компонент.

В моем проекте у меня есть app.comComponent.ts (основной компонент), hello.comComponent.ts (дочерний компонент).

Ссылка на Stackblitz
https://stackblitz.com/edit/angular-15-starter-project-mn2aey

Теперь я создал share.service, в своем общем ресурсе я объявил переменную count и метод для увеличения count переменная.

Когда мы работали с модулями, мы внедряли провайдера для совместного использования везде, где нам нужно поделиться на уровне модуля. Теперь нужно указать в разделе поставщика в @comComponent.

import { Component, VERSION } from '@angular/core';
// import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';
import { HelloComponent } from './hello.component';
import { ShareService } from './share.service';
@Component({
  selector: 'my-app',
  standalone: true,
  imports: [HelloComponent, HighlightDirective],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ShareService],
})
export class AppComponent {
  name = 'Angular';
  constructor(public share: ShareService) {}
  callMe() {
    this.share.addCount();
  }
}

в моем hello.comComponent.ts (дочерний компонент)

import { Component, Input } from '@angular/core';
import { ShareService } from './share.service';

@Component({
  selector: 'hello',
  standalone: true,
  template: `<h1 (click)="increase()">Hello {{name}}!</h1> <div>{{share.count}}`,
  styles: [`h1 { font-family: Lato; }`],
  // providers: [ShareService],
})
export class HelloComponent {
  constructor(public share: ShareService) {}
  @Input() name: string;
  increase(){
    this.share.addCount();
  }
}

Я закомментировал раздел провайдера, это означает, что я внедряю услугу.

Теперь, когда я увеличиваю счетчик с помощью метода addCount(). количество также будет увеличиваться у ребенка и наоборот.

Дочерний компонент предоставляет
После закомментирования поставщиков в дочернем компоненте. Теперь она будет увеличена индивидуально.

— — — — — — — — — Конец лекции — — — — — — —

Проверьте все уроки Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b