Angular 4 - 如何在 HTML 中显示 3rdpartylicenses

Question

在我用于实时网站的package.json构建过程中，我之所以使用它，是因为我希望在我的网站上以 HTML 形式显示许可证。 "build-prod": "ng build --prod --extract-licenses"--extract-licenses

我该如何使用.txtAngular 以 HTML 形式显示此文件？

Answer 1

它应该在域的根目录下可用。

dist这是运行后我的文件夹的屏幕截图ng build --prod（也提取了许可证）：

您应该能够通过以下代码访问它：（哎呀！我忘了您还必须安装@angular/common/http并使用新的HttpClient）

HttpClient最近在 Angular 4 中引入了：

import { HttpClient } from '@angular/common/http';
export class AboutComponent implements OnInit {
    constructor(private http: HttpClient){}
    license: string;
    ngOnInit(){
        this.http.get('/3rdpartylicenses.txt', {responseType: 'text'})
            .subscribe(result => {
                this.license = result;
            })
    }
}

使用旧的Http：

import { Http } from '@angular/http';
export class AboutComponent implements OnInit {
    constructor(private http: Http){}
    license: string;
    ngOnInit(){
        this.http.get('/3rdpartylicenses.txt')
            .map(res => res.text())
            .subscribe(result => {
                this.license = result;
            })
    }
}

<pre [innerText]="license"></pre>

编辑：

您还可以将属性通过请求传输license到管道。asyncHttpClient

请参阅下面的代码以获取更多信息：

成分：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export class AboutComponent {
  licenses: Observable<string>;
  constructor(private http: HttpClient) {
    this.licenses = http.get('/3rdpartylicenses.txt', { responseType: 'text' });
  }
}

组件模板：

<pre>
  <code>
    {{ licenses | async }}
  </code>
</pre>

这是一个可以玩的StackBlitz 演示！