Can I use an angular component selector as an attribute for that component?

Question

For example,

    @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>

My experience until now is that this doesn't work. Does anyone have any ideas on how to make this work? Or if it's even possible?

Answer 1

您应该在div标签上使用属性绑定。

 [editor]="value"

Answer 2

it is possible, you should enclose your selector in square braces

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

then use like this

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

or

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