我如何从S3在innerHTML/Dynamically中呈现角度绑定、指令和方法

Question

我正在一个基于sass的平台上工作，该平台是在Angular和NodeJs中开发的，我想在我的平台上展示我的代码库，这样客户端就可以轻松地编辑他们的代码并上线。但为此，我必须动态地呈现我的代码。

我试图在innerHTML中呈现角度绑定、指令和方法，但它不起作用，而是作为字符串起作用。如果有人知道如何以innerHTML或其他方式动态呈现角度绑定、指令和方法。请分享您的意见。提前感谢

Answer 1

模板字符串需要是"编译的"；在组件中动态使用。

以下是一个工作示例：

@Component({
selector: 'hello',
template: '<div #container></div>',
})
export class HelloComponent implements AfterViewInit {
@ViewChild('container', { read: ViewContainerRef })
container: ViewContainerRef;
constructor(
private injector: Injector,
private environement: EnvironmentInjector
) {}
ngAfterViewInit() {
this.environement.runInContext(() => {
// important part to allow DI with inject()
// Define the component using Component decorator.
const component = Component({
selector: 'test',
template:
'<div>This is the dynamic template. Test value: {{test}}</div>',
styles: [':host {color: red}'],
providers: [{ provide: Foo, useClass: Foo }],
})(
class {
private foo = inject(Foo); // DI
constructor() {
console.log(this.foo.rand);
}
test = 'some value';
}
);
// Define the module using NgModule decorator.
const module = NgModule({ declarations: [component] })(class {});
const componentRef = this.container.createComponent(component, {
injector: this.injector,
ngModuleRef: createNgModuleRef(module, this.injector),
});
setTimeout(() => (componentRef.instance.test = 'some other value'), 2000);
});
}
}

Stacklitz