Question

我有一个onclick事件，它将重定向到带有正确查询参数的新页面。我将在大约5个其他地方使用相同的功能，我试图将其放在一个公用的位置以供重用，而不是一遍又一遍地编写相同的代码。这只是一个简短的例子。希望我能了解如何在组件之间共享它。

我将功能移至的服务层将在多个组件之间共享。 onViolatorClick是需要共享的内容。

import { Injectable } from '@angular/core';
import { Router } from "@angular/router";

@Injectable({
  providedIn: 'root'
})
export class RoutesService {

  constructor(
    private router: Router
  ) { }

  public onViolatorClick(value): void {
    alert(value);

    this.router.navigate(["vio-violator"], {
      queryParams: { dmid: value }
    });
  }
}

HTML，基本的，但我知道如果该功能位于组件内部，则可以正常工作

<button (click)="onViolatorClick(dataItem.dmid)">Test!</button>

组件，这是我不确定如何正确使用onViolatorClick的地方

import {Component, OnInit} from "@angular/core";
import {MyMappService} from "./my-mapp.service";
import {MyMappProducts} from "./my-mapp.model";
import { onViolatorClick } from '../../shared/routes/routes.service';

@Component({
    templateUrl: "./my-mapp.component.html"
})
export class MyMappComponent implements OnInit {
    mid: string;
    getMyMappProducts: MyMappProducts[];

    constructor(
        private myMappService: MyMappService,
    ) {}

    ngOnInit() {
        this.getMyMappProducts = [];
        this.myMappService.getMyMappProducts("1").subscribe(res => this.getMyMappProducts = res);
    }
}

Answer 1

在组件的构造函数中获取服务

constructor(private routesService: RoutesService){}

然后像这样使用它

this.routesService.onViolatorClick()

Answer 2

您需要在component.ts文件的构造函数文件中添加服务。

1）在ts文件中导入服务文件。

2）在构造函数中添加服务文件。

constructor(private service : RoutesService)

3）现在，您可以轻松地调用method。

this.service.onViolatorClick();

Angular 6重用onclick事件

2 个答案: