2

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

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

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

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

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

@Input() myData: string;

该字符串可以正常工作，并且确实会传递到 Web 组件中。现在，如何将 observable 传递给 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 将 observable 传递给 Angular Web 组件不是这样做的方法，请告诉我。我也尝试过this.elRef.nativeElement.attributes['fetchEvent'].value，这对我也不起作用。

4

2 回答 2

1

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

由于 Angular Web 组件的 @Outputs 不仅允许传递字符串，因此我在 Web 组件内部创建了 observable，立即订阅监听事件，并立即将其传递给 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];
}
于 2020-09-09T18:23:09.393 回答
-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>;

}
于 2020-09-08T00:55:57.140 回答