与角度6+混合静态html页面

Question

当将静态html页面与有角度的6+应用程序混合而没有为每个页面编写空组件时的最佳实践是什么？

静态页面，例如...

• https://myapp.com/aboutus.html

• https://myapp.com/contactus.html

• https://myapp.com/news/whatever-news-article.html

Answer 1

您只需要一个组件就可以根据上下文填充内容。将每个文件内容作为单独的HTML字符串存储在服务器中。路由到在URL参数中传递上下文的组件。用它来查询服务器中的内容。

app.component.ts：

context : string = '';
htmlStr : string = '';

ngOnInit(){
    this.context = this.route.snapshot.params['context'];

    this.dataService.getHTMLContent(context).subscribe(
        response => {
            htmlStr = response;
        }, error => {
            console.log("Error",error.error)
        }
    );
}

app.component.html：

<pre [innerHTML]="htmlStr"></pre>

Answer 2

ng-build with your index.html set properly with its components. (or conditional app-components)
rename and copy the rendered to (for example) /src/assests/aboutus.html
in angular.json find "assets":

 "assets": [
      "src/favicon.ico",
      "src/assets",
      "src"
    ],
browse localhost:4200/aboutus.html directly.
Always place the static contents in assets folder, thats a good practice.