Angular 如何将可观测数据输入到角度web组件中

请注意，这个问题不是关于规则的角度分量。我特别询问一个使用Angular创建的可重用自定义元素，也称为Angular web组件

我有一个可重用的Angular 10 web组件托管在另一个Angular 10 web应用程序中。 使用以破折号分隔的小写属性名（即my data），我能够将一个字符串输入到一个角度web组件，该组件有一个小写的@input（即myData）

主机应用程序的标记中包含以下内容：

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

该字符串工作正常，并传递到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();
}

eventssobject:Subject=newsubject（）；
把手按钮单击（事件：任意）：无效{
this.eventsObject.next（）；
}

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

@Input() myData: string;

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

@Input（）myData:string；
@Input（）事件：可观察；

我还尝试了以下同样不起作用的方法： [获取事件]=“EventsObject.asObservable（）”

如果使用@Input将可观察的web组件传递到角度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();
}

private events对象：Subject=new Subject（）；
public subject=eventssobject.asObservable（）；
把手按钮单击（事件：任意）：无效{
this.eventsObject.next（）；
}

Html:

自定义元素实现：

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

}

@组件({
选择器：“我的自定义元素”
})
导出类MyCustomElement{
@输入（）
公共数据：可观察；
}

您的组件：

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

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

private events对象：Subject=new Subject（）；
public subject=eventssobject.asObservable（）；
把手按钮单击（事件：任意）：无效{
this.eventsObject.next（）；
}

Html:

自定义元素实现：

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

}

@组件({
选择器：“我的自定义元素”
})
导出类MyCustomElement{
@输入（）
公共数据：可观察；
}

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

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

Web组件（my custom元素是在我的app.module.ts的ngDoBootstrap（）中设置为导出组件名称的选择器）：

@Output（）setUpObservable=neweventemitter（）；
EventsObject:Subject=新主题（）；
事件：可观察；
ngOnInit（）：void{
EventsObject:Subject=新主题（）；
事件：可观察；
this.fetchEvent=this.eventssObject.asObservable（）；
this.eventSubscription=this.fetchEvent.subscripte（（x）=>{
//这里有一些代码，在主机应用程序启动之前，我不想运行这些代码
});
this.setUpObservable.emit（this.eventsObject）；//立即发送可观察的
}

主机应用程序标记：

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

主机应用程序组件：

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

eventssobject:Subject=newsubject（）；
onButtonClick（）：无效{
this.eventssobject.next（someData）；//它与Web组件对话，让它做一些事情
}
handleSetUpObservable（事件：CustomEvent）：无效{
this.eventsObject=event.detail.observer[0]；
}

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

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

Web组件（my custom元素是在我的app.module.ts的ngDoBootstrap（）中设置为导出组件名称的选择器）：

@Output（）setUpObservable=neweventemitter（）；
EventsObject:Subject=新主题（）；
事件：可观察；
ngOnInit（）：void{
EventsObject:Subject=新主题（）；
事件：可观察；
this.fetchEvent=this.eventssObject.asObservable（）；
this.eventSubscription=this.fetchEvent.subscripte（（x）=>{
//这里有一些代码，在主机应用程序启动之前，我不想运行这些代码
});
this.setUpObservable.emit（this.eventsObject）；//立即发送可观察的
}

主机应用程序标记：

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

主机应用程序组件：

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

eventssobject:Subject=newsubject（）；
onButtonClick（）：无效{
this.eventssobject.next（someData）；//它与Web组件对话，让它做一些事情
}
handleSetUpObservable（事件：CustomEvent）：无效{
this.eventsObject=event.detail.observer[0]；
}

请发布包含脚本标记的html代码您是否尝试过类似于：EventsObject.asObservable（）| async？请发布包含脚本标记的html代码您是否尝试过类似于：EventsObject.asObservable（）| async？方括号[]的内容不适用于web组件。输入名称必须在托管应用程序中以烤肉串的形式出现，并且只能作为字符串传入。经过大量的研究，我发现