Comment décorer le composant de la classe en angulaire?

Question

Je veux changer le décorateur de composant de la classe dans l'application angulaire4.

Quelque chose comme ceci:

import { Component, OnInit } from '@angular/core'; 
import { BooksService } from './../books.service'; 

@Component({ 
    selector: 'users', 
    templateUrl: this.template, 
    styleUrls: ['./users.component.css'] 
}) 

export class UsersComponent { 
    users: any; 
    template: any = './users.component.html'; 

    constructor(private booksService : BooksService) { 
    this.users = this.booksService.getItems(); 
    } 
} 

Comment puis-je mettre en œuvre ce?

Answer 1

Le décorateur ne fait pas partie de la classe, donc le this à l'intérieur du décorateur ne fait pas référence à l'élément.

Il techniquement être possible de le faire en utilisant des classes statiques:

@Component({ 
    selector: 'users', 
    templateUrl: UsersComponent.template, 
    styleUrls: ['./users.component.css'] 
}) 

export class UsersComponent { 
    users: any; 
    public static template: any = './users.component.html'; 
} 

... mais ce serait tout à fait inutile, comme une valeur statique serait juste la même chose que ce hardcoding. Heureusement, Angular ne nécessite aucune variable pour les décorateurs. Ça ne marcherait pas de toute façon; il compile ces modèles dans les coulisses avec les composants et changer le modèle casserait le compilateur (en particulier le compilateur AOT).

Essayez-vous de modifier le code HTML pour un composant? L'utilisation des directives Router ou structurelles est généralement une meilleure idée. Une approche plus directe de la désactivation du modèle pour un composant consisterait à utiliser un dynamic component qui accède directement aux composants TemplateRef d'autres composants et qui peut les échanger avec la vue.