用于返回html的Angular 5中的指令

如何通过指令返回小的html片段。这就是我想做的：

<app-icon glyph="music"><app-icon>

应替换为：

<span class='glyphicon glyphico-music' aria-hidden='true'></span>

我的错误指示是：

import { Directive } from "@angular/core";

@Directive({
  selector: "[app-icon]"
})
export class IconDirective {

  constructor(value: string) {
    return "<span class='glyphicon glyphicon-" +value + "' aria-hidden='true'></span>";
  }

}

import{Directive}来自“@angular/core”；
@指示({
选择器：“[应用程序图标]”
})
导出类IconDirective{
构造函数（值：字符串）{
返回“”；
}
}

您可以使用

@angular/core

中的

ElementRef

：

 constructor(private _el: ElementRef) {
 this._el.nativeElement.insertAdjacentHTML('beforeend',
  '<span class='glyphicon glyphicon-" +value + "' aria-hidden='true'></span>');
 }

构造函数（私有的：ElementRef）{
此.u el.nativeElement.insertAdjacentHTML（'beforeend'，
'');
}

您可以使用

@angular/core

中的

ElementRef

：

 constructor(private _el: ElementRef) {
 this._el.nativeElement.insertAdjacentHTML('beforeend',
  '<span class='glyphicon glyphicon-" +value + "' aria-hidden='true'></span>');
 }

构造函数（私有的：ElementRef）{
此.u el.nativeElement.insertAdjacentHTML（'beforeend'，
'');
}

根据前面的答案，我用这种方式解决了这个问题：

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

@Directive({
  selector: "app-icon"
})
export class IconDirective implements OnInit {
  @Input() glyph;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.insertAdjacentHTML("beforeend",
      `<span class='glyphicon glyphicon-${this.glyph} aria-hidden='true'></span>`);
  }

}

import{Directive，ElementRef，Input，OnInit}来自“@angular/core”；
@指示({
选择器：“应用程序图标”
})
导出类IconDirective实现OnInit{
@输入（）字形；
构造函数（私有el:ElementRef）{}
恩戈尼尼特（）{
this.el.nativeElement.insertAdjacentHTML（“beforeend”，
` 根据前面的回答，我用这种方式解决了这个问题：

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

@Directive({
  selector: "app-icon"
})
export class IconDirective implements OnInit {
  @Input() glyph;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.insertAdjacentHTML("beforeend",
      `<span class='glyphicon glyphicon-${this.glyph} aria-hidden='true'></span>`);
  }

}

import{Directive，ElementRef，Input，OnInit}来自“@angular/core”；
@指示({
选择器：“应用程序图标”
})
导出类IconDirective实现OnInit{
@输入（）字形；
构造函数（私有el:ElementRef）{}
恩戈尼尼特（）{
this.el.nativeElement.insertAdjacentHTML（“beforeend”，
`需要如何声明此指令才能在html中使用
？好的，我已经知道了。您需要有：
选择器：“app icon”
-不带括号
[]
和
[appIcon]
选择器（camelCase用于指令选择器）您可以将其添加到一个div中，如下图所示，该指令需要如何声明才能在html中使用
？好的，我已经知道了。您需要有：
选择器：“app icon”
-不带括号
[]
和
[appIcon]
选择器（camelCase用于指令选择器）您可以像这样将其添加到div