angular - forwardRef 有什么作用？

Question

什么是forwardRef用angular做的，它的用法是什么？

这是一个 example :

import {Component, Injectable, forwardRef} from '@angular/core';

export class ClassCL { value; }

@Component({
    selector: 'my-app',
    template: '<h1>{{ text }}</h1>',
    providers: [{provide: ClassCL, useClass: forwardRef(() => ForwardRefS)}]
})
export class AppComponent {
    text;

    constructor( myClass: ClassCL ) {
        this.text = myClass.value;
    }
}

Injectable()
export class ForwardRefS { value = 'forwardRef works!' }

Answer 1

根据 Angular 的文档:

Allows to refer to references which are not yet defined.

我认为，为了更好地理解 forwardRef 的工作原理，我们需要了解 Javascript 引擎盖下的事情是如何发生的。我将提供您可能需要使用 forwardRef 的特定情况的示例，但请考虑可能出现的其他不同情况。

我们可能知道，Javascript 函数被提升到其执行上下文的顶部。函数本身就是对象，其他对象也可以从函数创建。因为函数允许程序员创建对象实例，ECMAScript 2015 创建了某种语法糖以使 Javascript 感觉更接近基于类的语言，如 Java。进入类(class):

class SomeClassName { }

如果我们进入 Javascript 编译器(在我的例子中我使用的是 Babel)并粘贴它，结果将是:

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var SomeClassName = function SomeClassName() {
  _classCallCheck(this, SomeClassName);
};

最有趣的部分是注意到我们现实中的类是后台的一个函数。与函数一样，变量也在其执行上下文中被提升。唯一的区别是，虽然我们可以调用函数(因为我们可以引用它的指针，即使它被提升了)，变量也会被提升并赋予默认值 undefined。在运行时在赋值的给定行为变量分配一个值，可能不是未定义的值。例如:

console.log(name);
var name = 'John Snow';

实际上变成了:

var name = undefined;
console.log(name) // which prints undefined
name = 'John Snow';

好的，考虑到所有这些，现在让我们进入 Angular。假设我们的应用程序中有以下代码:

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

@Injectable()
export class Service1Service {
    constructor(private service2Service: Service2Service) {
    }

    getSomeStringValue(): string {
        return this.service2Service.getSomeStringValue();
    }
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private service1Service: Service1Service) {
        console.log(this.service1Service.getSomeStringValue());
    }
}

export class Service2Service {
    getSomeStringValue(): string {
        return 'Some string value.';
    }
}

当然，我们需要提供这些服务。让我们在 AppModule 中提供它们:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent, Service1Service, Service2Service } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Service1Service, Service2Service],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppModule 的元数据中重要的一行是:

providers: [Service1Service, Service2Service]

如果我们运行这段代码，我们会得到以下错误:

嗯嗯，很有趣...这是怎么回事？那么，根据前面的解释，Service2Service 变成了一个后台函数，但是这个函数被赋值到一个变量中。此变量已提升，但其值未定义。由于这一切，无法解析参数。

输入forwardRef

为了解决这个问题，我们有一个名为forwardRef 的漂亮函数。这个函数的作用是它接受一个函数作为参数(在我展示的例子中我使用了箭头函数)。这个函数返回一个类。 forwardRef 等到 Service2Service 被声明，然后它触发被传递的箭头函数。这导致返回我们创建 Service2Service 实例所需的类。因此，您的 app.component.ts 代码将如下所示:

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

@Injectable()
export class Service1Service {
    constructor(@Inject(forwardRef(() => Service2Service)) private service2Service) {
    }

    getSomeStringValue(): string {
        return this.service2Service.getSomeStringValue();
    }
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private service1Service: Service1Service) {
        console.log(this.service1Service.getSomeStringValue());
    }
}

export class Service2Service {
    getSomeStringValue(): string {
        return 'Some string value.';
    }
}

总而言之，根据我提供的示例，forwardRef 允许我们引用稍后在我们的源代码中定义的类型，防止我们的代码崩溃并为我们在代码中组织事物的方式提供更大的灵 active 。

希望我的回答对您有所帮助。 :)