如何将可观察对象输入 Angular Web 组件

Question

请注意，此问题与常规 Angular 组件无关。我特别询问使用 Angular 创建的可重用自定义元素，也称为 Angular 网络组件。

我有一个可重用的 Angular 10 Web 组件托管在另一个 Angular 10 Web 应用程序中。使用以破折号分隔的小写属性名称（即 my-data），我能够将字符串输入到 Angular Web 组件，该组件具有带小驼峰字母的 @Input（即 myData）。

HOST APP 的标记中包含以下内容：

<my-custom-element my-data="test"></my-custom-element>

可重复使用的 Web 组件 - 我的自定义元素：

@Input() myData: string;

该字符串工作正常并且确实被传递到网络组件中。现在，如何将可观察对象传递给 Web 组件？示例（这不起作用，因为它将 "" 中的内容作为文字字符串。）

主机应用标记：

<my-custom-element 
    my-data="test"
    fetch-event="eventsSubject.asObservable()"
></my-custom-element>

主机应用组件：

eventsSubject: Subject<void> = new Subject<void>();

 handleButtonClick(event: any): void {
   this.eventsSubject.next();
}

可重复使用的 Web 组件 - 我的自定义元素：

@Input() myData: string;
@Input() fetchEvent: Observable<void>;

我也试过以下方法也不起作用： [获取事件]="eventsSubject.asObservable()"

如果使用@Input 将 observable 传递给 Angular Web 组件不可行，请告诉我。我也尝试了 this.elRef.nativeElement.attributes['fetchEvent'].value，但对我也不起作用。

Answer 1

你的组件：

private eventsSubject: Subject<void> = new Subject<void>();
public subject = eventsSubject.asObservable();    

handleButtonClick(event: any): void {
 this.eventsSubject.next();
}

Html:

<my-custom-element [myData]="subject"></my-custom-element>

自定义元素实现：

@Component({
  selector: 'my-custom-element'
})
export class MyCustomElement {
  @Input()
  public myData: Observable<any>;

}

Answer 2

经过大量研究并发现无法通过@Input 将复杂数据传入 Angular Web 组件，这就是我所做的并且到目前为止对我来说效果很好。

由于 Angular Web 组件的 @Outputs do 允许传递的不仅仅是字符串 out，我创建了相反，web 组件内部的可观察对象会立即订阅以侦听事件，并立即将其传递给 Angular 主机应用程序。然后在主机应用程序中，通过标记接收可观察对象并用于将事件广播到监听的 Web 组件。

Web 组件（my-custom-element 是我的 app.module.ts 的 ngDoBootstrap() 中设置为导出组件名称的选择器）：

@Output() setUpObservable = new EventEmitter<Subject<void>>();
eventsSubject: Subject<void> = new Subject<void>();
fetchEvent: Observable<any>;

ngOnInit(): void {
   eventsSubject: Subject<void> = new Subject<void>();
     fetchEvent: Observable<any>;

   this.fetchEvent = this.eventsSubject.asObservable();
       this.eventSubscription = this.fetchEvent.subscribe((x) => {
         // some code in here that I did not want to run until it was initiated by the host app
       });
       this.setUpObservable.emit(this.eventsSubject); // immediately send out the observable
}

主机应用标记：

<my-custom-element 
    (setUpObservable)="handleSetUpObservable($event)"
></my-custom-element>

主机应用程序组件：

eventsSubject: Subject<void> = new Subject<void>();

onButtonClick(): void {
 this.eventsSubject.next(someData); // this talks to the Web component to tell it to do stuff
}

handleSetUpObservable(event: CustomEvent): void {
    this.eventsSubject = event.detail.observers[0];
}

如何将可观察对象输入 Angular Web 组件

How to input an observable into an Angular web component

web-component

angular

angular10