web-dev-qa-db-ja.com

Angular2の属性ディレクティブを使用していくつかのhtml要素を追加する方法

特定のattribute directiveがHMTL要素に存在する場合、いくつかの追加の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>
  }
}
angularangular2-directives
6
user1275105

コードが無効であるため、更新は次のとおりです。

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

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

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

ディレクティブの実装は不完全に見えます。ディレクティブを使用するには、ディレクティブを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の例 ここ をご覧ください。

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

次に、出力を確認します。

0
Shubham Verma

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

}
0
Parth Chokshi