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

问题描述

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

我在另一个Angular 10 Web应用程序中托管了一个可重用的Angular 10 Web组件。 使用以短划线分隔的小写形式的属性名称（即my-data），我可以将字符串输入到具有@Input小写驼峰（即myData）的Angular Web组件中。

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

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

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

@Input() myData: string;

该字符串可以正常工作，并且确实可以传递到Web组件中。现在，如何将可观察对象传递给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>;

我也尝试了以下方法，这些方法也行不通： [fetch-event] =“ eventsSubject.asObservable（）”

如果无法使用@Input将可观察到的内容传递给Angular Web组件，请告诉我。我还尝试了this.elRef.nativeElement.attributes['fetchEvent'].value，但该方法也对我不起作用。

解决方法

您的组件：

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>;

}

,

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

由于Angular Web组件的@Outputs做做，不仅允许传递字符串输出，所以我在Web组件内部创建了Observable，立即订阅以收听进行事件处理，并立即将其传递给Angular主机应用。然后在主机应用程序中，可观察到的事件通过标记接收，并用于将事件广播到侦听的Web组件。

Web组件（我的自定义元素是将选择器设置为我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];
}