如何在Angular中动态加载模板

我创建了一个新组件，

componentB

，它使用了一个与另一个组件非常相似的模板（

componentA

）。当前，当访问某个

url

时，将加载

组件a

。对于新组件，我想在加载不同的

url

时加载一个稍微不同的模板

组件A

以以下内容开头：

@Component({
  selector: 'app-reset.app-page.app-page__start',
  templateUrl: './reset.component.html',
})

---

如何使

模板url

动态化，以便如果我转到

/url/component-a-route

或

/url/component-b-route

，我可以路由相应的模板。我决定用一个非常相似的模板将其分为两个不同的组件，但最好重用该模板，只需更改一些位。

您应该能够通过注入Angular router并检查当前页面url将动态字符串注入模板url来解决此问题：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-reset.app-page.app-page__start',
    template: '{{path}}/reset.component.html'
})
export class Component {
    public path: string = "";

    constructor(private router: Router) {}

    ngOnInit() {
        this.path = this.router.url.indexOf('urlA') >= 0 ? 'pathA' : 'pathB';
    }
}