Можно ли добавить два шаблона для одного компонента в угловом2?

Question

У меня есть один компонент с одним html и .ts файлом. По некоторым причинам мне приходится создавать страницы с несколькими страницами (HTML).
Возможно ли создать несколько (html) страниц для одного класса (компонента)?
Или можно предоставить динамический TemplateUrl компоненту?

Моим основным мотивом является предоставление разных URL-адресов и использование разных видов (HTML-страниц), но с использованием одного класса (компонент класса i.e).
Я видел много вопросов, упомянутых ниже, связанные с этим, но не в состоянии основать точный оптимальные решения

• Dynamic template URLs in Angular 2
• How can I have dynamic templateUrl for Angular2 Component?

Я хочу что-то вроде этого

{ path: '/Login', component: LogIn, name: "Login"}, 
{ path: '/Login2', component: LogIn, name: "Login" }, 
{ path: '/Login3', component: LogIn, name: "Login" } 

Я хочу для загрузки одного и того же компонента с другим URL-адресом и представлением.

Answer 1

Угловая лучшая практика - это один компонент включает в себя один шаблон. Если вы хотите применить одну и ту же логику к двум представлениям, вы должны создать эту логику внутри службы и использовать одну службу для двух разных наборов компонентов. URL-адреса - это другая проблема, выполняемая маршрутизатором. Вы должны назначить компонент A URL A и компонент B по URL B.

Answer 2

Это возможно с наследованием. Различные шаблоны вида и стиля, но (в основном) один и тот же базовый код компонента. Вам все равно придется объявлять метаданные @Component, поэтому, если вы используете атрибуты доступа и т. Д., Вам также нужно будет переопределить их.

Первый компонент:

import { Component, Input, OnInit } from '@angular/core'; 

import { KeyValuePairBase } from '../../model/key-value-pair-base' 

@Component({ 
    moduleId: module.id, 
    selector: 'select-list', 
    templateUrl: './select-list.component.html', 
    styleUrls: ['./select-list.component.scss'] 
}) 
export class SelectListComponent implements OnInit { 
    @Input() private data: KeyValuePairBase[]; 

    constructor() { 
    super(); 
    } 

    ngOnInit() { 
    if (!this.name) throw new Error("'name' property is required by 'select-list' component"); 
    if (!this.friendlyName) throw new Error(`'friendlyName' property is required by 'select-list' component '${this.name}'`); 
    } 
} 

Второй компонент:

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

import { SelectListComponent } from '../select-list/select-list.component' 

@Component({ 
    moduleId: module.id, 
    selector: 'radio-list', 
    templateUrl: './radio-list.component.html', 
    styleUrls: ['./radio-list.component.scss'] 
}) 
export class RadioListComponent extends SelectListComponent { 
}