Kann ich zwei Schablonen für eine Komponente in angular2 hinzufügen?

Question

Ich habe eine Komponente mit einem HTML-und .ts-Datei. Aus irgendwelchen Gründen muss ich mehrere Seiten (HTML) Seiten erstellen.
Ist es möglich, mehrere (html) Seiten für einzelne Klassen (Komponenten) zu erstellen?
Oder ist es möglich, dynamische TemplateUrl der Komponente zur Verfügung zu stellen?

Mein Hauptmotiv ist es, verschiedene URL und verschiedene Ansicht (HTML-Seiten) zu verwenden, sondern mit einer einzelnen Klasse (.ts Klasse, d. H. Komponente)?
Ich habe viele Fragen unten im Zusammenhang mit, dass aber nicht in der Lage bezeichnen gesehen genau lösungs-

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

Ich mag

wie dies etwas gefunden

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

Ich mag um die gleiche Komponente mit einer anderen URL und Ansicht zu laden.

Answer 1

Eckige Best Practice ist eine Komponente enthält eine Vorlage. Wenn Sie die gleiche Logik auf zwei Sichten anwenden möchten, sollten Sie diese Logik in einem Service erstellen und einen Service für zwei verschiedene Komponentensichtgruppen verwenden. URLs sind ein anderes Problem, das vom Router behandelt wird. Sie sollten Komponente A der URL A und Komponente B der URL B zuweisen.

Answer 2

Dies ist mit Vererbung möglich. Unterschiedliche Ansichts- und Stilvorlagen, aber (im Prinzip) derselbe zugrunde liegende Komponentencode. Sie müssen die @Component-Metadaten noch deklarieren. Wenn Sie also Werteaccessoren usw. verwenden, müssen Sie diese ebenfalls neu definieren.

Erste Komponente:

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}'`); 
    } 
} 

Zweite Komponente:

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 { 
}