Angular Elements - 默认情况下多个实例共享相同的服务

如何解决Angular Elements - 默认情况下多个实例共享相同的服务

我已经基于角度元素创建了自己的 webcomponent。我按照手册做了一切。

示例代码为：

resource existingVNET 'Microsoft.Network/virtualNetworks@2021-02-01' existing = {
  name: 'the-existing-vnet'
}

resource subnetPbdResource 'Microsoft.Network/virtualNetworks/subnets@2021-02-01' = {
  name: 'first-snet'
  parent: existingVNET
  properties: {
    addressprefix: '10.0.1.0/24'
  }
}

resource subnetPbdResource2 'Microsoft.Network/virtualNetworks/subnets@2021-02-01' = {
  name: 'second-snet'
  parent: existingVNET
  properties: {
    addressprefix: '10.0.2.0/24'
  }
  dependsOn: [
    subnetPbdResource
  ]
}

resource subnetPbdResource3 'Microsoft.Network/virtualNetworks/subnets@2021-02-01' = {
  name: 'third-snet'
  parent: existingVNET
  properties: {
    addressprefix: '10.0.3.0/24'
  }
  dependsOn: [
    subnetPbdResource2
  ]
}

我也有 applicationservice：

    const el = createCustomElement(AppComponent,{ injector: this.injector });
    customElements.define('my-widget',el);

毕竟，当我运行漂亮的“my-widget”元素时 - 1 个实例运行良好。但是如果我运行两次，看起来 applicationservice 总是只运行一次（单个实例）。

示例：

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

我想实现每个人都有自己的实例。我正在寻找解决方案，我注意到 config 有额外的字段，如：<my-widget id="widget1"></my-widget> <my-widget id="widget2"></my-widget>

中的 strategyFactory

createCustomElement

我不知道如何使用它。你有什么想法吗？

解决方法

不要使用 { providedIn: 'root' }，这会将服务注册为应用级别的单例。如果您需要每个组件的新实例，请使用组件的 providers[]。

@Component({
  selector: 'my-widget',providers: [ApplicationService]
})
export class MyWidgetComponent