如何在Angular中动态加载模板

Question

I have created a new component, componentB that uses a very similar template as another component ( componentA ). Currently, when a certain url is accessed, the componentA is loaded. With the new component, I want to load a slightly different template when a different url is loaded.

componentA starts with the following:

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

How can I make the templateUrl dynamic, such that if I go to /url/component-a-route or /url/component-b-route , I can route the corresponding template. I decided to split this into two different components with a very similar template, but it would be better to reuse the template and just change a few bits.

Answer 1

You should be able to solve this by injecting Angular router and checking the current page url to inject a dynamic string into your template 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';
    }
}