Wie man einige html Elemente mit Angular2s Attributdirektive hinzufügt

Question

Wenn ein bestimmter attribute directive auf einem HMTL Element anwesend ist, würde ich etwas zusätzlichen HTML Inhalt zeigen. Ich habe gesucht, kann aber nicht finden, wonach ich suche. Zum Beispiel, wenn P-Tag eine Direktive hat, die can-delete genannt wird, dann würde ich mögen löschen Knopf, um zu zeigen.

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

Das ist, was ich bisher habe:

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

Warum Sie nicht * ngIf verwenden. Es kann verwendet werden, um bedingtes HTML anzuzeigen.

Html Datei

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

Sie Richtlinie Umsetzung unvollständig aussieht. Sie müssen Ihre Anweisung an jedes Ereignis wie click, focus etc. binden, um diese Anweisung zu verwenden.

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

wir verwenden createElement Methode Schaltfläche zu erstellen, wenn der Benutzer schweben über Element unserer Richtlinie enthält. ich hoffe es hilft!

EDIT: Werfen Sie einen Blick auf renderercreateElement Beispiel here für weitere Informationen.

Answer 3

Sie eine Richtlinie erstellen sollten:

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

und jetzt Ihre Richtlinie wurde wie unten in die app.module.ts erstellt und Sie müssen hinzufügen diese Anweisung:

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

Sie haben Verwenden Sie Ihre Anweisung in Ihrem HTML, wo Sie diese HTML hinzufügen möchten, wie in der folgenden Code:

<div add-html></div> 

Jetzt sehen Sie den Ausgang.

Answer 4

@Shubham Verma

Ihr Code nicht gültig ist, so ist hier ein Update

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

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

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