如何使用结构指令更改边框？

Question

我正在尝试创建一个执行两件事的角度指令。

 1. change border of the host element
 2. append a button at the end of the host element

到目前为止，我正处于必须设置宿主元素边框的第一步。

HTML

  <div *myDirective
        <h1> some value </h1>
  </div>      

指令

export class MyDirective{

  constructor(private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {
      this.templateRef.elementRef.nativeElement.style['border'] = '1px solid red';
      this.viewContainer.createEmbeddedView(this.templateRef);
    }      
}

现在当我将此指令添加到 div 元素时，我收到以下错误，

Cannot set property 'border' of undefined

如何更改样式并使用结构指令将另一个元素附加到主机？

[编辑] 由于大多数答案都建议我创建一个属性指令，所以我只想从角度文档中发布关于结构指令的声明。

它们塑造或重塑 DOM 的结构，通常是通过添加、移除或操作元素。

在这种情况下，创建属性指令以将按钮附加到宿主元素是不合适的。不是吗？

Answer 1

试试这样：

DEMO

mydirective.ts：

import { Directive, TemplateRef, ElementRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appMydirective]'
})
export class MydirectiveDirective {

  constructor(private el: ElementRef) {
    console.log(this.el.nativeElement)
    el.nativeElement.style.border = '2px solid red';
    let bt = document.createElement("button");
    var btContent = document.createTextNode("my Button");
    bt.appendChild(btContent);
    bt.style.cssFloat = 'right'
    this.el.nativeElement.append(bt)
  }
}

HTML：

<div appMydirective>
        <h1> some value </h1>
  </div> 

Answer 2

确实，我会为此使用结构指令。

但是templateRef.elementRef.nativeElement只是一个html注释，并没有style属性。

要附加按钮，您可以遵循这个非常好的结构指令示例： Adding a Component to a TemplateRef using a structural Directive

Answer 3

对于边框，您需要执行以下操作：

创建指令：

import { Directive, ElementRef, Renderer } from '@angular/core';

// Directive decorator
@Directive({ selector: '[myDirective]' })
// Directive class
export class MyDirective {
    constructor(el: ElementRef, renderer: Renderer) {
    // Use renderer to render the element with styles
    renderer.setElementStyle(el.nativeElement, 'border', '1px solid red');
    }
}

接下来需要通过 SharedModule 声明和导出该指令，以便应用模块可以全局加载和导入。

共享模块

import { NgModule } from '@angular/core';

import { MyDirective } from './my-directive.directive';

@NgModule({
    declarations: [
        MyDirective
    ],
    exports: [
        MyDirective
    ]
})
export class SharedModule{}

然后在app.module中导入共享模块

然后按如下方式使用：

<div myDirective>
    <h1> some value </h1>
</div> 

Demo