如何将可观察到的信息输入到有角度的web组件中
请注意，这个问题不是关于正则角分量的。我特别询问的是一个可重用的自定义元素，它是用角创建的，也称为角web组件。
我有一个可重用的角10 web组件托管在另一个角10 web应用程序。使用以破折号分隔的小写(即我的数据)的属性名，我能够将字符串输入到具有@输入和较低camel大小写(即myData)的角web组件中。
主机应用程序的标记中有以下内容：
<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传递一个可观察到角度的web组件并不是这样做的，请告诉我。我也试过this.elRef.nativeElement.attributes['fetchEvent'].value，它也不适合我。
回答 2
Stack Overflow用户
发布于 2020-09-09 10:23:09
经过大量的研究和发现，我们无法通过@Input将复杂的数据传递到角度Web组件中，到目前为止，这就是我所做的，并且工作得很好。
由于角Web组件do的@输出允许不仅仅将字符串传递给，所以我在web组件中创建了可观察到的内容，立即订阅侦听事件，并立即将其传递给角主机应用程序。然后在主机应用程序中，通过标记接收可观察到的事件，并用于向侦听的web组件广播事件。
Web ( my是被设置为的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];
}Stack Overflow用户
发布于 2020-09-07 16:55:57
您的组件：
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>;
}https://stackoverflow.com/questions/63785082
复制相似问题
腾讯云开发者
