Мы увидели, как создать отдельный компонент и отдельную директиву. Теперь пришло время посмотреть, как нам следует обращаться с сервисами с автономным компонентом.
С автономным компонентом мы сделали его уровнем от модуля к компоненту. следовательно, нам нужно использовать его автономный компонент.
В моем проекте у меня есть 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