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

如果HMTL元素上存在某個attribute directive，我想顯示一些額外的html內容。我已經搜索，但無法找到要查找的內容。例如，如果P標籤有一個叫做can-delete的指令，那麼我想要刪除按鈕來顯示。如何使用Angular2的屬性指令添加一些html元素

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

來源

2016-08-14 user1275105

你爲什麼不使用* 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; 
} 

}

來源

2016-08-15 02:12:07

你的指令實現看起來不完整的。您必須將您的指令綁定到任何事件，如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方法時，在元素用戶將鼠標懸停包含我們的指令來創建按鈕。希望能幫助到你！

編輯：看看renderercreateElement示例here欲瞭解更多信息。

來源

2016-08-15 05:29:53 candidJ

我想刪除按鈕，顯示當指令ISCAN銷燬存在。不在懸停。 – user1275105

你可以使用'ngViewAfterInit'來渲染按鈕。 'export class MyComponent implements AfterViewInit ngAfterViewInit（）{this._renderer.createElement（this._el.nativeElement.parentNode，'button'）; } }' – candidJ

您應該創建一個指令：

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>

現在看到輸出。

來源

2017-08-10 06:51:19

@Shubham維爾馬

您的代碼是無效的，所以這裏是一個更新

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

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

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

來源

2017-10-08 17:28:20 Johansrk

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

回答

相關問題