Question

我创建了一个新组件componentB，该组件使用与另一个组件（componentA）非常相似的模板。当前，当访问某个url时，将加载componentA。对于新组件，我想在加载不同的url时加载稍微不同的模板。

componentA以以下内容开头：

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

如何使templateUrl动态，这样，如果我转到/url/component-a-route或/url/component-b-route，就可以路由相应的模板。我决定使用一个非常相似的模板将其分为两个不同的组件，但是最好重用模板并只更改一些内容。

Answer 1

您应该能够通过注入Angular路由器并检查当前页面的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';
    }
}

如何在Angular中动态加载模板

1 个答案: