有没有办法在Angular中创建一个文章应用程序而不创建数百个组件?

Question

我想在Angular中创建一个网站，它将有一堆文章，这些文章基本上是遵循相同模板的静态页面。我知道可以通过为每个组件创建一个组件来实现，但我觉得有更好的方法。

起初，我想创建一个组件，从HTML文件加载文章，并在div标记中呈现它。它将根据路由参数选择合适的文件。此外，我希望它有像routerLink这样的Angular属性来创建到其他文章的链接。但我一直在寻找这样的解决方案，但没有成功，我甚至不知道这是否是一条路。

有人知道怎么做这样的事情吗?

Answer 1

所以，我想我可以自己弄清楚。我基本上监控了加载文件上的点击事件，并用Angular路由器覆盖了本地链接上的默认导航。我将展示用于测试此特性的代码。

要加载的文件:

<p><a href="/about">Local link</a></p>
<p><a href="https://www.example.com/" target="_blank">External link</a></p>

加载文件的服务方法:

constructor(private http: HttpClient) { }
loadHTML(filename: string): Observable<string> {
return this.http.get(`/assets/${filename}.html`, { responseType: 'text' });
}

加载文件:

content = '';
constructor(private loadFile: LoadFileService, private router: Router) { }
ngOnInit(): void {
this.loadFile.loadHTML('test').subscribe(file => {
this.content = file;
});
}

呈现加载的文件并检查单击事件:

<p [innerHTML]="content" (click)="processLink($event)"></p>

处理click事件并在本地url上使用Angular路由器:

processLink(event: MouseEvent): void {
const el = <HTMLElement>event.target;
if (el.nodeName === 'A') {
const url = el.getAttribute('href');
if (!url?.startsWith('http')) {
event.preventDefault();
this.router.navigateByUrl(url || '');
}
}
}