Posso aggiungere due template per un componente in angular2?

Question

Ho un componente con un file html e .ts. Per alcune ragioni devo creare pagine multiple (HTML).
È possibile creare più pagine (html) per singola classe (componente)?
Oppure è possibile fornire TemplateUrl dinamico al componente?

Il mio principale motivo è fornire URL diversi e utilizzare visualizzazioni diverse (pagine HTML) ma utilizzando una classe singola (componente i.e della classe .ts)?
ho visto molte domande di cui qui di seguito, per tale, ma in grado di fondare esatto soluzione-

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

voglio qualcosa di simile

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

voglio per caricare lo stesso componente con URL e viste diversi.

Answer 1

La migliore pratica angolare è che un componente include un modello. Se si desidera applicare la stessa logica a due viste, è necessario creare quella logica all'interno di un servizio e utilizzare un servizio per due diversi set di viste componenti. Gli URL sono un altro problema, gestito dal router. È necessario assegnare il componente A all'URL A e il componente B all'URL B.

Answer 2

Ciò è possibile con l'ereditarietà. Diversi modelli di visualizzazione e stile, ma (fondamentalmente) lo stesso codice componente sottostante. Devi ancora dichiarare i metadati di @Component, quindi se stai utilizzando accessors di valore, ecc, dovrai ridefinire anche quelli.

Prima componente:

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

Seconda componente:

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