Angular - 通过选择器获取数据后将数据插入组件答案

【问题标题】：Angular - inserting data to a component after getting by selectorAngular - 通过选择器获取数据后将数据插入组件
【发布时间】：2022-09-27 19:46:29
【问题描述】：

我正在将一个空组件动态插入到页面中。为简单起见，我对导入进行了硬编码。有没有办法在插入之前将简单的 html 传递给该组件？

page.page.ts

this.componentService
  .getComponentBySelector(\"app-content\", () =>
    import(\"src/app/components/content.module\").then(m => m.ContentModule)
    )
  .then(componentRef => {
    // pass \"<span>William</span> to the imported component first before inserting into the page
    this.container.insert(componentRef.hostView);
});

内容.component.ts

import { SafeHtml } from \'@angular/platform-browser\';
import { Component, Input, OnInit } from \'@angular/core\';

@Component({
  selector: \'app-content\',
  templateUrl: \'./content.component.html\',
  styleUrls: [\'./content.component.scss\'],
})
export class ContentComponent implements OnInit {
  @Input() content: SafeHtml;
  constructor() { }

  ngOnInit() {

  }

}

content.component.html

<div>Greetings {{ content }}</div>

你应该有componentRef.instance 或类似的东西，让你可以访问创建的类实例
你能给我一个例子吗？我不是 100% 关注你。

标签： angular typescript

【解决方案1】：

我设法完美地解决了它。这是其他可能遇到相同问题的人的答案：

我使用了 ngx-dynamic-hooks。它允许代码和组件一起动态编写。

https://github.com/MTobisch/ngx-dynamic-hooks

【讨论】：