如何將 HTML 文件讀入 Angular 中的組件

Question

我正在嘗試在 Angular 12 中創建動態打印模板。我想根據在主組件視圖中使用的選擇器上傳遞的參數動態填充 html 正文文本。 打印布局組件在共享模塊中，兩個 html 模板都在 app 文件夾中。

我的要求是：

1. 我想讀取打印布局組件中的 html 文件並顯示它。 我不想創建組件並在打印布局中呈現組件

2. 我不想將 html 文件保存在后端並觸發 api 來獲取 html

打印布局.component.html

<div [innerHtml]="myTemplate"></div>

打印布局.component.ts

@Component({
            selector: 'app-print-layout',
            templateUrl: './print-layout.component.html',
            styleUrls: ['./print-layout.component.scss']
        })            
        
        export class PrintLayoutComponent implements OnInit{
            @Input() modalID;
            myTemplate;    

            ngOnInit() {
                   if(modalID == "1")
                      template = '../../app/tools/test/test-message1.html';
                    else (modalID == "2")
                        template = '../../app/tools/test/test-message2.html';
            }
           
        }

另外，我已經完成了這個解決方案Read HTML File into template in Angular 2? 他們從主組件文件動態創建組件。

有沒有辦法在不創建組件的情況下在主組件中顯示 html 模板文件。 另外，請建議在不在Angular中創建組件的情況下顯示html內容的正確方法......？

Answer 1

您可以嘗試像這樣在 print-layout.component.html 中使用 iframe 標記

<iframe [src]="myTemplate"></iframe>

顯然，在 ngOnInit() 上，您需要將路徑分配給 myTemplate 作為在 html 中使用的相同名稱