В настоящее время у меня есть служба Angular, которая содержит необходимую мне функциональность. Как я могу заставить службу взаимодействовать с компонентом?

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

Составная часть

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

import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-add-view-modal',
  templateUrl: './add-view.component.html',
  styleUrls: ['./add-view.component.css']
})
export class AddViewComponent implements OnInit {

constructor(public dialogRef: MatDialogRef<AddViewComponent>,
  @Inject(MAT_DIALOG_DATA) data) {}

  ngOnInit() {
  }
}

внедрить ViewManagerService через конструктор вашего компонента

— 06.04.2022 10:26

Как бы я этого добился? Нужно ли указывать службу в качестве поставщика в определении @Component?

— 06.04.2022 10:31

Вы установили createdIn для службы на корневом уровне. Таким образом, вам не нужно передавать службу в массиве компонентов поставщиков (если вы не хотите, чтобы был введен новый экземпляр службы)

— 06.04.2022 10:33

Я думаю, вам следует еще раз прочитать документы: angular.io/guide/injection-injection

— 06.04.2022 10:33

angular angular-services angular-components

06.04.2022 10:08

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

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

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете просто использовать автоматическое внедрение зависимостей Angular:

import {ViewManagerService} from 'path/to/view-manager.service.ts';
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';


@Component({ selector: 'app-add-view-modal', templateUrl: './add-view.component.html', styleUrls: ['./add-view.component.css'] })

export class AddViewComponent implements OnInit {

constructor(
   private viewManagerService: ViewManagerService,
   public dialogRef: MatDialogRef<AddViewComponent>,
   @Inject(MAT_DIALOG_DATA) data
) {
}

ngOnInit() {
   this.viewManagerService.doSomething();
}
}

06.04.2022 10:30

Сначала добавьте свой сервис к провайдеру в файле app module.ts.

Затем добавьте службу в конструктор, как показано ниже.

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

import {serviceClassName} from '../service/serviceClassName';

    @Component({
    selector: 'app-add-view-modal',
    templateUrl: './add-view.component.html',
    styleUrls: ['./add-view.component.css']
    })

export class AddViewComponent implements OnInit {

constructor(public serviceName: serviceClassName) {}

ngOnInit() {}

Используйте необходимую функциональность или переменную, объявленную в сервисе, как показано ниже.