ウェブサイト検索

javascript - ファイルをゴミ箱に移動するアニメーションを実装するためのHTML/CSS/JS

フォルダーツリーからゴミ箱に移動するアクションを提供したいです。

ユーザーが削除ボタンをクリックしたとき、アイテムをゴミ箱に移動するアニメーションを表示したいです。

例のレイアウト。

+-------- | - dir1 | - file1 x | - file2 x | - subDir1 | - file3 x +-------- | Trash +--------

要素はそれが存在するディレクトリに対して『相対的』に配置されるのに対し、ゴミ箱は最上位に対して相対的であるため、どうやってそれを行うのかがわかりませんでした。

最小限のレイアウトを含むサンプルコード。

https://codepen.io/anon/pen/NaLEjx

xアイコンをクリックすると、ファイルは「ゴミ箱」とラベル付けされた要素に移動するはずです。

それをどうやってするか教えてください。

続きを読む →

変数 - 中括弧に含まれる TypeScript に HTML から値を渡す方法

私は Ionic 2 を使ってハイブリッドチャットアプリを開発しており、クリックイベント時に HTML から TypeScript に値を渡したいのですが、値は Firebase から同期されるため丸括弧に入っており、HTML では他の丸括弧の中に丸括弧を設定することが許可されていません。

directchat.ts

import { Component, ViewChild } from '@angular/core'; import { NavCo

続きを読む →

javascript - HTMLテキストをレンダリングするのではなく、DOM要素を作成するmarkdown-itの代替

私は現在、ウェブ拡張機能で翻訳可能なチュートリアルや変更履歴を表示するために markdown-it を使用しています。しかし、Mozilla には innerHTML の使用は安全ではないと警告する安全チェックがありました。そこで、HTML テキストをレンダリングするのではなく、DOM 要素を作成する JavaScript(できれば TypeScript)用のマークダウンライブラリがあるかどうか気になっています。

続きを読む →

typescript - Angular 4でサードパーティライブラリのコンポーネントのみをオーバーライドし、親コンポーネントのテンプレート(HTML)、CSSを使用する方法

Angular 4でサードパーティライブラリのコンポーネントのみをオーバーライドし、親コンポーネントのテンプレートやCSSを使用するにはどうすればよいですか?

1) Angularでサードパーティのライブラリをオーバーライドする際に、テンプレートやCSSをオーバーライドすることは必須ですか?

2) それでは、オーバーライドの方法の例を示すことは必須ではないのですか?

私はAngular 4でこのライブラリngx-carouselを使用しており、ライブラリコンポーネントの特定のメソッ

続きを読む →

Angular 4 - 同じコンポーネント内で複数のHTMLページを条件付きで読み込むために [ngTemplateOutlet] を使用する方法

Angular 4では、[ngTemplateOutlet] を使用して、同じHTMLページ内で定義された異なるHTMLテンプレートをそのIDを使って参照することができます。しかし、外部で定義されたHTMLページを1つのコンポーネントのHTML内で条件付きで読み込むにはどうすればよいですか。コードスニペットは以下の通りです: main.component.html

<div *ngIf="page == 'test'"> <ng-template [ngTemplateOutlet]="test"></ng-template> </div> <ng-template #test> <b>test template</b> </ng-template>

コンポーネントコードスニペット: main.component.ts

if(this.router.url == "/test"){ this.pa

続きを読む →

typescript - angularアプリでhtml2canvasがコードを中断しないpromiseエラーを投げる

html2canvas(document.getElementById('imageArea'), { useCORS: true }).then(canvas => {

このコードの行はこのエラーを出しているようです

core.js:1440 ERROR Error: Uncaught (in promise): [object Undefined] at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4724) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at

続きを読む →

reactjs - カスタムの React TypeScript 要素を HTMLElement にキャストする方法は?

カスタム要素の配列があり、それぞれの要素にrefを保存して、特定のものに対してfocus()を呼び出したいと考えています。カスタムReact要素をDOM要素にキャストしてfocus()を可能にすることは可能でしょうか?

SampleFeed.tsx

class Feed extends React.Component<{ posts: Post[] },{}> { private postRefs: Map<number, P

続きを読む →

angular - 子コンポーネントでAPI呼び出しのデータを使用してHTMLセレクトのデフォルト値を設定する

私は、APIコールからのデータで事前入力したいマルチコンポーネントフォームを持っています。すべてのフィールドには正しくデータが入力されますが、selectタグの選択された値だけが正しく表示されません。valueは正しいのですが、select内の正しいoptionが表示されていません。他の

の部分、つまりinputフィールドは正しいデータで埋まります。

続きを読む →

javascript - Angular 2/4/5/6 - カスタムコンポーネントの innerHTML をコンポーネントクラス側で変換する

私は次の基本コンポーネントを作りたいです: card.component がユーザーがその innerHTML に定義したものをコンポーネントクラスに取り込み、それを変換してテンプレートに表示できるようにするコンポーネントです。

これはユーザーがこのコンポーネントを使用する方法です:

<app-card>hello world, this is a sample text</app-card>

続きを読む →

typescript - AngularのHTMLテンプレートで複数のオブジェクト型の配列のオブジェクトメンバーをどのように扱うか?

私は2つのクラス FileInfo と UploadFileInfo を持っています。後者は前者を拡張しています。私のメソッドでは、オブジェクトを配列 contents に追加しますが、どちらの型でも可能です。

public contents: Array<FileInfo | UploadFileInfo> = new Array<FileInfo | UploadFileInfo>();

そして私のHTMLテンプレートでは、ngForを使ってコンテンツを繰り返し処理します。

私の問題は、HTMLテンプレートで型チェックを実行できず、UploadFileInfo のメンバーが anonymous であることに関してエラーが出ていることです。どうやら、このテンプレートは最初の FileInfo を参照型とし

続きを読む →