web-dev-qa-db-fra.com

Puis-je ajouter deux modèles pour un composant dans angular2?

J'ai un composant avec un fichier HTML et .ts. Pour certaines raisons, je dois créer plusieurs pages (HTML).
Est-il possible de créer plusieurs pages (html) pour une seule classe (composant)?
Ou est-il possible de fournir dynamiquement TemplateUrl au composant?

Mon motif principal est de fournir différentes URL et d'utiliser différentes vues (pages HTML) mais en utilisant une seule classe (composant .ts de classe i.e)?
J'ai vu de nombreuses questions mentionnées ci-dessous mais incapables de trouver une solution exacte-

Je veux quelque chose comme ça 

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

Je veux charger le même composant avec une URL différente et afficher.

angularangular2-template
9
Pardeep Jain

C'est possible avec l'héritage. Modèles de vue et de style différents, mais (essentiellement) le même code de composant sous-jacent. Vous devez toujours déclarer les métadonnées @Component. Par conséquent, si vous utilisez des accesseurs de valeur, etc., vous devrez également les redéfinir.

Premier composant: 

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

Deuxième composant: 

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

La meilleure pratique angulaire est qu'un composant inclut un modèle . Si vous souhaitez appliquer la même logique à deux vues, vous devez créer cette logique dans un service et utiliser un service pour deux ensembles de vues de composant différents . URL. sont un problème différent, géré par le routeur. Vous devez affecter le composant A à l'URL A et le composant B à l'URL B.

2
Benyamin Shoham