要将对象绑定到Angular自定义元素的输入上,您可以使用属性绑定。下面是一个示例代码,展示了如何解决这个问题:
首先,在您的自定义元素组件类中,创建一个用于接收对象的输入属性:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-element',
template: `
{{ objectData | json }}
`
})
export class CustomElementComponent {
@Input() objectData: any;
}
然后,在使用自定义元素的父组件中,将对象绑定到自定义元素的输入属性上:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
myObject = {
name: 'John',
age: 30
};
}
这样,myObject
对象就会被绑定到自定义元素的 objectData
输入属性上,可以在自定义元素的模板中使用。
注意:确保在使用自定义元素之前,在 AppModule
或其他适当的模块中将 CustomElementComponent
声明为一个 entryComponents,以确保 Angular 能够正确处理它。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomElementComponent } from './custom-element.component';
@NgModule({
imports: [BrowserModule],
declarations: [CustomElementComponent],
entryComponents: [CustomElementComponent]
})
export class AppModule {
ngDoBootstrap() {}
}
这样,Angular 就可以正确处理该自定义元素并将对象绑定到输入上。