Puis-je utiliser un sélecteur de composants angulaires en tant qu'attribut pour ce composant?

Question

Par exemple,

@Component({ 
     selector: 'editor', //Same as component input 
     templateUrl: './editor.component.html', 
     styleUrls: ['./editor.component.scss'] 
    }) 
    export class Editor implements OnInit { 
     @Input() editor: string; //Same name as selector 
     @Input() color: string; 
     constructor() { } 

     ngOnInit() { 
     } 
    } 

HTML: <div editor="value" color="blue"></div>

Mon expérience jusqu'à maintenant est que cela ne fonctionne pas. Est-ce que quelqu'un a des idées sur la façon de faire ce travail? Ou si c'est même possible?

Answer 1

Vous devez utiliser la propriété de liaison sur votre balise div.

[editor]="value" 

Answer 2

il est possible, vous devez placer votre sélecteur dans des crochets

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

@Component({ 
    selector: '[editor]', //Same as component input 
    template: `<span>Foo Bar template</span>`, 
}) 
export class TryComponent implements OnInit { 
    @Input() editor: string; //Same name as selector 
    @Input() color: string; 
    constructor() { } 

    ngOnInit() { 
     console.info(this.editor); 
    } 
} 

utilisent alors comme ce

<div [editor]="'FooBarValue'" color="blue"></div> 

ou

<div [editor]="classProperty" color="blue"></div>