如何在角度2中初始化将组件属性作为参数传递的提供者

Question

我有一个名为workspace 的组件，它应该提供一个名为DbService 的服务。 此服务旨在供workspace 的子组件使用。 DbService 有一个参数path。

我希望能够按如下方式初始化我的组件：

<workspace db="/a/b/c"></workspace>
<workspace db="/d/e/f"></workspace>

并确保在工作区中初始化的每个DbService 提供程序都可以访问其构造函数中的 db 属性值。 dbService 也是异步初始化的。理想情况下，应在 dbService 完全初始化后初始化子组件。

我尝试了很多不同的方法，但到目前为止都没有成功。

使用来自组件属性的参数异步初始化Provider 的推荐方法是什么？

Answer 1

您要做的是将组件更改检测策略设置为 OnPush。基本上所做的是，变化检测只会在输入变化时运行。下一部分是将要在组件中运行的任何逻辑挂钩到 ngOnChanges() 方法中，该方法将在每次通过您控制的输入为组件补充水分时触发，因此您的数据库服务将始终使用正确的路径进行初始化：

import {Component, ChangeDetectionStrategy} from "@angular/core";

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class WorkspaceComponet
{
    @Input() db;

    constructor(private dbService: DbService)
    {
    }

    ngOnChanges()
    {
        this.dbService.init(this.db)
    }

}

Answer 2

在您的 DbService 上有一个显式的 init 方法，然后执行以下操作：

<workspace [db]="a/b/c"></workspace>

export class WorkspaceComponent{
  @Input() db;

  constructor(private dbService: DbService){
    dbService.init(db)
  }
}

Answer 3

在工作区组件中使用@input db:string 变量并在您使用工作区组件的位置设置 db 变量。

例如：

<workspace [db]="/a/b/c"></workspace>


@Component({
  selector: 'workspace',
  template: `
    {{db}}
  `
})
export class HeroChildComponent {
  @Input() db: string;
}

Answer 4

这不是 DI 可以单独处理的事情，因为在实例化服务时属性不可用。

解决方法是

class DbServiceContainer {
  instance: DbService;
}

@Component({
  ...
  providers: [DbServiceContainer]
})
class WorkspaceComponent {
  constructor(@Attribute('db') db, dbServiceContainer: DbServiceContainer) {
    dbServiceContainer.instance = new DbService(db);
  }
}

@Component({ ... })
class WorkspaceChildComponent {
  dbService: DbService;

  constructor(dbServiceContainer: DbServiceContainer) {
    this.dbService = dbServiceContainer.instance;
  }
}