如何使用结构指令更改边框? [英] How to change border using a structural directive?

问题描述

我正在尝试创建一个可以做两件事的 angular 指令.

 1. 改变宿主元素的边框2.在宿主元素的末尾追加一个按钮

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

HTML

指令

导出类 MyDirective{构造函数(私有模板引用:模板引用<任何>，私有视图容器:ViewContainerRef) {this.templateRef.elementRef.nativeElement.style['border'] = '1px 纯红色';this.viewContainer.createEmbeddedView(this.templateRef);}}

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

无法设置未定义的属性边框"

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

由于大多数答案都建议我创建一个属性指令，因此我只想发布角度文档中关于结构指令的声明.

<块引用>

它们通常通过添加、删除或操作元素来塑造或重塑 DOM 的结构.

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

解决方案

试试这个:

演示

mydirective.ts:

import { Directive, TemplateRef, ElementRef, ViewContainerRef } from '@angular/core';@指示({选择器:'[appMydirective]'})导出类 MydirectiveDirective {构造函数(私有 el:ElementRef){控制台日志(this.el.nativeElement)el.nativeElement.style.border = '2px 纯红色';让 bt = document.createElement("button");var btContent = document.createTextNode("我的按钮");bt.appendChild(btContent);bt.style.cssFloat = '正确'this.el.nativeElement.append(bt)}}

HTML:

<h1>某个值</h1>

I am trying to create an angular directive that does two things.

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

As of now i am on the first step where i have to set the border of host element.

HTML

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

Directive

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

Now when i add this directive to a div element,I get the following error,

Cannot set property 'border' of undefined

How could i change the style and append another element to the host using structural directive?

[Edit] As most of the answers are suggesting me to create an attribute directive, i just want to post the statement from angular document regarding structural directives.

They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

In that case creating attribute directive to append a button to the host element is not proper. Isn't it?

解决方案

Try like this:

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> 

这篇关于如何使用结构指令更改边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！