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

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

创建指令：

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声明并导出此指令，以便应用程序模块可以全局加载和导入它。

Shared.module

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

Answer 2

尝试这样：

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 3

事实上，我会为此使用结构化指令。

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

要附加按钮，您可以按照以下很好的结构指令示例进行操作： Adding a Component to a TemplateRef using a structural Directive

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

3 个答案: