Как программно передать объект пользовательскому элементу Angular (@angular/elements)? ⇐ Html

[Anonymous]

Я пытаюсь передать объект в качестве входных данных для пользовательского элемента Angular, созданного с помощью @angular/elements, а не через атрибуты HTML (поскольку setAttribute поддерживает только строки).
Вот минимальный пример:

Код: Выделить всё

import {
Component,
Input,
Injector,
inject,
NO_ERRORS_SCHEMA,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { CommonModule } from '@angular/common';

@Component({
imports: [CommonModule],
selector: 'foo',
template: `foo works! {{ data.test() | json }}`,
})
export class Foo {
@Input() name = '';
@Input() data: any;
}

@Component({
selector: 'app-root',
template: `
Hello from {{ name }}!
[url=https://angular.dev/overview]
Learn more about Angular
[/url]

`,
schemas: [NO_ERRORS_SCHEMA],
})
export class App {
name = 'Angular';
injector = inject(Injector);

constructor() {
const el = createCustomElement(Foo, { injector: this.injector });
customElements.define('app-foo', el);

const e = document.querySelector('app-foo') as any;
queueMicrotask(() => {
e.data = {
test: () => {
console.log('in test');
return 'test';
},
};
});
}
}

bootstrapApplication(App);

Я ожидаю, что элемент напечатает «fooworks! test» в шаблоне и выведет сообщение «in test» на консоль.
Однако шаблон не обновляется — похоже, что @Input() не обнаруживает назначение объекта.
Вопрос:
Как передать сложный объект (с функциями или вложенными) data) программно в элемент Angular, чтобы компонент получил их и шаблон обновился?
Примечания:

• Использование setAttribute() позволяет передавать только строки, а не объекты.
• Я использую Angular 20.0.0.
• Проверено на StackBlitz.

Демо-версия Stackblitz

Подробнее здесь: https://stackoverflow.com/questions/798 ... angular-el