我目前有一项包含我需要的功能的角服务。如何让服务与组件相互作用？

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 的自动依赖注入：

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

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

使用在服务中声明的所需功能或变量，如下所示

 this.serviceName.finctionName();