Question

我想知道是否可以从实现自定义接口的组件类的引用中传回我的Angular 6项目中的注入服务类？

我想要的例子。

ServiceClass

@Injectable()
export class MyService {
    constructor(private parent: MyComponent){ // <- Get back a reference from the component I inject this into, somehow?
        parent.doStuff();
    }
}

ComponentClass

@Component({
  selector: 'project-a-component',
  template: `
    <div>stuff</div>
  `,
  styleUrls: ['./a.component.scss']
})
export class AComponent implements MyComponent {
    constructor(private myService: MyService){ }

    doStuff(): void {
        console.log('yey!');
    }
}

编辑： 我想存档的是一种监听OnDestroy事件的方法，该组件能够运行.pipe（takeUntil（parent.isDestroyed））取消订阅，而无需在我在项目中使用服务的每个地方都实现它。或者必须在每个方法调用中将引用传递给我的父组件。在构造函数中（或仅在单个位置）具有引用的方法非常棒。因此，我试图以一种相关且简单的方式来解释我的问题。

Answer 1

看看这个：https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88，以便您可以制作自己的版本，挂接到组件中的OnDestroy并做您想做的一切：

export function MyDecorator( constructor ) {
  const original = constructor.prototype.ngOnDestroy;
  constructor.prototype.ngOnDestroy = function () {
    if (this.myService) {
      // do stuff!
    }
  };
}

当然，您可以使用与文章相同的示例，该示例将取消订阅所有订阅，这当然是合乎需要的，不仅是针对单个服务！：）

然后将其导入到您的组件中，并在组件上标记装饰器：

@MyDecorator
export class MyComponent {
// ...

Answer 2

一种用于管理此服务的方法，该方法是在服务中的某个方法中采用采用组件接口并将其设置为自己内部的变量的方法。我只需要在使用它的任何地方在ngOnInit（）中运行此方法。它减少了我组件中的大量代码，并且感觉像是一种有效的方法。

@Injectable()
export class MyService {
    private component: MyComponent;

    constructor(){}

    setMyComponent(component: MyComponent): void {
        this.component = component;
    }
}

@Component({
  selector: 'project-a-component',
  template: `
    <div>stuff</div>
  `,
  styleUrls: ['./a.component.scss']
})
export class AComponent implements MyComponent {
    constructor(private myService: MyService){
        myService.setMyComponent(this);
    }
}

将引用从实现的地方传递回注入的服务类

2 个答案: