angular - 通过 fileReplacements 在 Angular 中处理静态页面

Question

我正在寻找以下问题的解决方案。

我的应用程序将由两部分组成：

1. SPA APP - Angular App - 标准配置/模式，

app/src/...index.html-> 从那个地方是引导组件。

2. 带有静态 html 和多个登录页面的文件夹

   Folder:
        LandingPage1/index.html (and another pages)
        LandingPage2/index.html (and another pages)
        LandingPage3/index.html (and another pages)
        index.html
   

问题是：

从后端，从第一个请求中，我得到了有关 LandingPage 名称的信息 - fe LandingPage1。我想从

Folder:

LandingPage1/index.html (and another pages)
LandingPage2/index.html (and another pages)
LandingPage3/index.html (and another pages)
index.html <- here - <app-root>

并且依赖于请求响应可以通过 LandingPage 路由访问同名文件夹。

在 React 中——我们有专门的解决方案——而且非常简单：

https://create-react-app.dev/docs/using-the-public-folder/

我们可以在角度上做同样的事情吗？现在我正在尝试：

-> 将 LandingPages 文件夹放到资产中 -> 并在 angular.json 中通过 fileReplacments 处理它（index.html）（但是 css 呢？）

标签： angular

Answer 1

首先，您应该使用自己的逻辑和后端 plusAngular-router来处理路由（阅读文档）

创建组件和路由以在模板中呈现 HTML 文件后，您可以使用[innerHtml]. 请记住，文件扩展名不会打印在 URL 中，因为它被注入到 Angular 模板中，因此默认情况下它看起来example.com/LandingPage1像example.com/LandingPage1/index.html

最佳做法是将 html 文件存储在 /src/views 文件夹中

import { Component } from '@angular/core';
var template = require("./html1.html");

declare var require: {
(path: string): any;
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => 
void) => void;
};

@Component({
  selector: 'my-app',
  template: `<div [innerHtml]="html1">`
})
export class AppComponent  {
  html1:string = template;
}

工作堆栈闪电战

（但是 CSS 呢？）

之后，您可以在此处导入您的全局 CSS：