示例代码: // 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实例将共享相同的数据。