Question

如果HMTL元素上存在某个attribute directive，我想展示一些额外的html内容。我搜索过但找不到我要找的东西。例如，如果P标签有一个名为can-delete的指令，那么我想删除按钮来显示。

<p can-delete>Hello World!</p>

这是我到目前为止所得到的：

// >>> home.ts
import { Component } from "@angular/core";
import {canDelete } from "./can-delete.directive.ts";
@Component({
  templateUrl:"home.html",
  directives: [canDelete]
})
export class HomePage {

  constructor() {   }

}

// >>> home.html
<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  Content...
  <p can-delete>Hello World!</p>
</ion-content>

// >>> can-delete.directive.ts
import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[can-delete]"
})
export class canDelete {
  constructor(el: ElementRef) {
   //show delete button
   //<button>Delete</button>
  }
}

Answer 1

你的指令实现看起来不完整。你必须将你的指令绑定到任何事件，如click，focus等，以便使用该指令。

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

@Directive({
  selector: "[can-delete]"
})

export class canDelete {
  constructor(private _el: ElementRef, private _renderer : Renderer) {

  }
@HostListener('mouseenter') onMouseEnter() {
     this._renderer.createElement(this._el.nativeElement.parentNode, 'button');
  }
}

当用户将鼠标悬停在包含我们指令的元素上时，我们正在使用createElement方法创建按钮。希望它有所帮助！

编辑：有关详细信息，请查看renderer createElement示例here。

Answer 2

您的代码无效，因此以下是更新：

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

@Directive({
  selector: '[appLoading]'
})
export class LoadingDirective {

  constructor(private elementRef:ElementRef){
    this.elementRef.nativeElement.innerHTML ='<h1>Hello World2</h1>';
  }
}

Answer 3

为什么不使用* ngIf。它可以用于显示条件HTML。

Html文件

<p>Hello World! <button type="button" *ngIf="showButton">Delete</button></p>

<button type="button" (click)="toggleButton()">Toggle</button>

app.component.ts

export class AppComponent implements OnInit{

    showButton:boolean;

constructor(){}

ngOnInit(){
    this.showButton = true;
}

toggleButton(){
   this.showButton = !this.showButton;
}

}

Answer 4

您应该创建一个指令：

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

现在您的指令已经创建，您可以将此指令添加到app.module.ts中，如下所示：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';


@NgModule({
  declarations: [
    AppComponent,
    TestDirectives
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您必须在html中使用您的指令，您要添加此html，如下面的代码所示：

<div add-html></div>

现在看输出。

如何使用Angular2的属性指令添加一些html元素

4 个答案: