我目前有一个包含我需要的功能的 Angular 服务。如何让服务与组件交互？

Question

我想知道如何让我的服务成功地将其数据传递到位于不同目录中的所需组件。

组件

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() {
  }
}

Answer 1

您可以只使用 Angular 的 automatic dependency injection:

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();
}
}

Answer 2

首先，将您的服务添加到应用程序 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() {}

像下面这样使用在服务中声明的所需功能或变量

 this.serviceName.finctionName();

我目前有一个包含我需要的功能的 Angular 服务。如何让服务与组件交互？

I currently have an Angular service that contains the functionality I need. How can I have the service interact with a component?

angular-services

angular-components

angular