angular - 将 Angular 组件动态转换为 HTML

Question

我希望在元素内单击按钮时呈现模板，我已将该模板创建为单独的组件(自定义组件)，因为它可以多次使用。因此，当我单击希望将此自定义组件编译为 HTML 字符串返回时，因为我需要使用该字符串处理某些内容并发送 html 字符串。有 Angular 吗？

示例代码(只是为了解释我的情况)

import { templatecomponent } ./template.component

...

onButtonClick(): any
{
  return compile(templatecomponent) // return the html from the template component
}

Answer 1

我认为你不能像上面那样使用它!您有用于组件和条件检查的选择器。您可以使用条件检查来检查按钮的单击情况，如果为 true，您的组件将被调用

Custom.component.ts 

    @Component({
       selector: "custom-app",
       template: `I am from custom component`,
       style: ""
    })

Calling.component.ts

     @Component({
           selector: "calling-app",
           template: `<button (click)="customFn()">Show custom</button>
                       <custom-app *ngIf="isCustom"></custom-app>
                      `,
           style: ""
     })

    export class CallingComponent{
            isCustom: false
            constructor(){}
            customFn(){
                this.isCustom =  !this.isCustom
            }
     }

不要忘记配置模块