AngularElements-默认情况下多个实例共享相同的服务
- 创建一个共享的服务，它负责处理需要共享的逻辑。
- 在module中将该服务提供给root，以确保整个应用程序中只有一个实例。
- 使用该服务来将数据或状态共享给任意数量的Angular Elements实例。
示例代码： // shared service import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class SharedDataService { data: any; }
// angular element component import { Component } from '@angular/core'; import { SharedDataService } from './shared-data.service';
@Component({ selector: 'my-angular-element', template: '
constructor(private sharedDataService: SharedDataService) { this.data = sharedDataService.data; } }
// app component import { Component } from '@angular/core'; import { SharedDataService } from './shared-data.service';
@Component({
selector: 'my-app',
template:
})
export class AppComponent {
constructor(private sharedDataService: SharedDataService) {
this.sharedDataService.data = 'Hello World';
}
}
这里，我们创建了一个名为SharedDataService的服务，它在整个应用程序中都是提供的。我们在Angular Elements的构造函数中注入该服务，并使用它来共享数据。在AppComponent中，我们将SharedDataService的data属性设置为“Hello World”，这意味着两个Angular Elements实例将共享相同的数据。