Angular: 提案：コンポーネント宣言でホスト要素にディレクティブを追加する機能が必要です。

私は現在大規模なクライアントを開発しているため、GUIに関連するすべての問題を再利用可能なAngular2ディレクティブに分解しようとしています。 ジェームズが完全に指摘したように、これは常に私に同じ問題を引き起こします。
これは、優れたモジュラーおよび動的アーキテクチャーのために、実際に何らかの形で機能する必要があります。 タッチの例は、これが必要な多くのシナリオの1つにすぎません。 例：ドラッグアンドドロップ、サイズ変更観察などなど。
プランカーとして別の例を作成しました：
https://plnkr.co/edit/J65THEMic0yhObt1LkCu?p=info

この機能がすぐに追加される可能性はありますか？

これに関連するStackOverflowの質問は次のとおりです： http ：

@ Andy1605これを回避する方法を見つけたことがありますか？ これが原因で、RC中にNG2を使用するようにテーブルを作成しました。 それを取り戻したいのですが、この特定の問題により、拡張可能なUIパターンを構築できません。

また、Angularには本質的な機能が欠けていると感じています。 コンポーネントがそのホストの（複数の）属性ディレクティブを宣言できる必要があります。 それができないことも、私のプロジェクトにとって大きな障害です。
これが将来実装されるかどうか、またはそれが実行できない理由があるかどうか誰かが知っていますか？

この問題の解決策を（Angularバージョン1ではありますが）ここで提案しました： https ：

私の考えでは、コンパイルフレームワークには、ディレクティブを追加する機能だけでなく、「hostTransforms」（角度1の場合は「nodeTransforms」）と呼ばれる新しい拡張ポイントがあり、変更されていない、フィルタリングされていないコンポーネント宣言にアクセスできます。また、コンポーネントがコンパイラーによって最初に検出され、DOMに挿入する準備ができている場合は常に、元のコンパイルされていないコンポーネントホストノード。 このようにして、開発者はカスタムプロパティを使用してコンポーネントデコレータを拡張し、nodeTransformsを使用して、コンパイルの直前に、これらのカスタムプロパティをAngularフレームワークが使い慣れたものに変換できます。 例については、機能リクエストスレッドを確認してください。

私はAngular2ソースコードよりもAngularソースコードに精通しているので、実装プロセスがここで同じかどうかはわかりません。 しかし、これはかなり人気のあるリクエストのようですので、Angular 2で実装されてバックポートされるか、Angularjsで実装されてフォワードポートされるのを見てみたいです（それは問題ですか？）。

+1

私は同意する必要があります、ホストに貢献する属性ディレクティブを追加できる機能は素晴らしいでしょう。 私は今、そのような機能を使用して、UIコンポーネントにドラッグアンドドロップ機能を追加するような、より「角度のある」方法を実装できることを知っています。

hostメタデータプロパティの代わりにコンポーネントのテンプレートに適用できる<ng-container>ような新しいタグを作成するのはどうですか？ ディレクティブがホストコンポーネントに追加されたことを示す<ng-host [attributeDirective]>ようなもの。

@jjstreetあなたの提案は、しばらく前に廃止されたreplace: true （明らかに同一ではありませんが、類似しています）に似ています。 しかし、おそらくreplace: trueは、ここでは当てはまらない理由で非推奨になりました。

@ pkozlowski-opensourceこれについて、ng2チームから何らかの回答を得ることができますか？

私はこれを達成するためのあらゆる方法のためのゲームです。 コンポーネントのローカルスコープにアクセスでき、コンポーネント自体に属性がすでに追加されているため、hostプロパティを提案しました。 ディレクティブは、この動作の自然な拡張のようです。

+1この機能は、UIコンポーネントにクリーンで再利用可能なコードを含めるために必要です

+1

これについて、ng2チームから何らかの回答をいただけますか？ あなたがそれをするつもりはないと言ったり、それは良い考えであるが現在の優先事項ではないと言ったりするだけでも、私はある種の意見を聞きたいと思います。

このための別のユースケースを追加したいと思います。 これにより、ng2-mobx（https://github.com/500tech/ng2-mobx）がラッピングコンポーネントを取り除き、よりきれいに見えるようになります。

私もこれが欲しいです。 現在、カスタムrouterLinkディレクティブを作成するために必要です。 角度のあるものを再利用して、miディレクティブによって準備されたパラメーターを提供したいと思います。

したがって、 <a [routerLink]="repeatedCodeToGetLink()">代わりに<a [myRouterLink]>あり、解決されたパラメーターを使用して[routerLink]を動的に適用します。

これの見通しに本当に興奮しています！

しばらくの間、これが必要でした。 実際、未解決の問題があることに気付く少し前に、スタックオーバーフローについて、本質的にこの機能について

この機能を使用して、しばらく開いていたhttps://github.com/angular/flex-layout/issues/162を解決する方法の詳細な例を示しました。 （ここの例と説明を参照してください）

フィードバックをお待ちしております。この問題は、このリポジトリで未解決の問題の中で3番目に評価が高い問題である

/ cc @tbosch @IgorMinar @mhevery @jelbourn @hansl @ThomasBurleson

@jjstreet私はあなたの提案だと思います

<ng-host myDirective="foo"></ng-host> 

...ここで説明しているのとは別の理由でしばらく前に作成された別の提案とうまくいくでしょう。

https://github.com/angular/angular/issues/7297を参照して

現在、親コンポーネントにディレクティブを追加してから、@ HostListenerを使用してホストにリスナーを追加することで、これを回避しています。

Parent.html
<my-component myDirective>

Component.ts
@HostListener('myEvent') handler() { // do stuff }

しかし、ホストに直接属性を追加できれば、よりクリーンになります...

これが私がこれに対処してきた方法ですが、この機能を地上から実装することが最善の解決策になると本当に思います。

• 私のスタックオーバーフロー回答での完全な説明： http ：
• TL; DRプランカーを参照： https ：//plnkr.co/edit/TCagW8vOPrqSiOT9Oztf

Angularチームからのこれに対する肯定的または否定的なコメントを待っていることを毎月お知らせします。

@ tbosch-この問題の優先順位に関する一般の考え。 @angular/flex-layoutにも影響します。

@fadzicこれを行うことで、ディレクティブをホスト要素に追加するだけではいけません...

Component.ts
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective()

または、ElementRefやRenderer2などのパラメータが必要な場合は、このようにします
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective(this.elementRef, this.renderer)

また、host要素にディレクティブを追加する必要があり、この問題にリダイレクトされました。 上記のコードを使用して、必要なことを実行できました。 私はAngularを使用する専門家ではありませんが、誰かがこのアプローチで問題を抱えている場合は、この回避策は今のところうまくいくようです。 ありがとう。

@btinocoは、ライフサイクルメソッドが呼び出されないため

@hccampos頭を上げてくれてありがとう。 試したところ、ディレクティブのngOnInitが実行されなかった（コンポーネントでディレクティブを手動で使用した場合を除く）か、コンポーネントのngOnInit()ディレクティブのngOnInit()を呼び出しました。 。 改めてお知らせいただきありがとうございます。

@ btinoco-はい。 それは微妙ですが厄介な問題です。 @ angular / flex-layoutが期待するものはまもなく修正されます。 ;-)

これに関するAngularチームからのニュースはありますか？ 発行から1年が経ちました...

この問題に関するこの詳細な説明を見つけることは非常にクールでした、
その後、Angularチームからのフィードバックが見つからなかったのは非常にクールではありませんでした:(

すでに機能しているソリューションについて：

この機能リクエストは、ミックスインに非常によく似ています。 実際、説明の2番目の箇条書き
この機能の実際には公式と一致します
TypeScriptのドキュメントについては、こちらをご覧
角度では、これは少し悪化しますが、 @Input()のクラスをミックスインすると、
基本クラスでそれらを再宣言する必要があります。

今日すでに機能しているもう1つの解決策は、コンポーネントにラッパー要素を含め、そこにディレクティブを適用することです。
たとえば、コンポーネントに<wrapper g-touch>...ようなテンプレートが含まれている場合

「elementRef.nativeElementで直接サービスを介してそれを行うヘルパー関数を作成する」について：
はい、それも良い考えのようです。 今のところWebWorkersは気にしませんが
それらはまだ実験的であり、本番用のいくつかのより大きな機能が欠けているため、
そして、WebWorkersで動作するライブラリはほとんどありません。
たとえば、DOMに直接アクセスするマテリアルライブラリも参照してください。

提案のオプション1）について：

ホストプロパティバインディングの現在のセマンティクスは、
基になるHTML要素にプロパティmyDirを設定すること。
ただし、ディレクティブはありません。 ただし、 hostでもディレクティブを導入できる場合、ユーザーは次のように書くことができます。
そして、なぜこれがディレクティブmyDirのプロパティを更新しないのか混乱するでしょう：

@Component({
  host: {
    '[myDir]': true
  },
  template: '...'
})
class MyComp {}

オプション1）およびオプション3）について：
同じ要素のディレクティブ間にある種のhostバインディングを導入すると、次のことが可能になります。

• Angularがサポートしていないデータバインディンググラフのサイクルにつながるため、
  値が古いためにエラーをデバッグするのが困難になります/「チェック後に式が変更されました」エラー。
• 互いに注入するディレクティブと比較して、追加のパフォーマンスオーバーヘッドにつながります
  直接通信します。

提案のオプション2）について：

• はい、他のすべてのディレクティブと同様に、 gTouchクラスを参照する必要があるのは奇妙に思えます
  NgModuleを介してトリガーされます。

@ThomasBurlesonは、ユースケースについてオフラインで詳しく話しましょう...

@tbosch別のオプションを提案したいと思います。ネイティブのAngularタグを導入し、それを<ng-host>と呼びましょう。

注： @mheveryはhttps://github.com/angular/angular/issues/7546で<ng-host>タグの導入を提案しましたが、ここでは同じタグ名を使用していますが、私は何ですか提案は別個のものであり、ここで提起された問題に対処することを特に意図しています。

ng-hostタグは、通常のディレクティブ/コンポーネントクラスとして実装されるのではなく、代わりに「魔法の」フレームワークコードになります... ng-content 、 ng-containerなどに似ています。 。、
タグは、css :hostセレクターに類似した方法で、コンポーネントホストへの「ポインター」として機能するだけです。

あいまいなシナリオを回避し、各コンポーネントは最大で1つの<ng-host>ブロックのみを持つことができ、そのコンポーネントのテンプレートのルートタグ/ノードである必要があります。

これがそれをどのように使うかです：

// Option 5: Use `<ng-host>`.. Very declarative and intuitive
@Component({
  selector: 'g-btn',
  template: `
    <!-- 
      Besides comments, having dom code inside the template but outside of a declared 
      ng-host code block would raise an error (hopefully at compile-time) .
    -->

    <ng-host role="button" g-touch> 
      <ng-content></ng-content>
    </ng-host>
  `
})

ちなみに@tboschさん、ご

この機能に関する他のすべての人の考えはコンポーネントに固有ですか、それともディレクティブがそのホストに別のディレクティブを適用できるかどうかも意味がありますか？ この問題のサブスクライブを開始したユースケースには、A）後で変更したい場合に備えてコードから分離したい、B）複製せずに各インスタンスにデフォルトの機能を適用したい、というサードパーティのディレクティブが含まれていました。使用するたびにセットアップします。

たとえば、アプリケーション全体の多数の要素に適用されるツールチップディレクティブで、デフォルトでdelayとappendToBodyを使用します（一元化された構成オブジェクトをサポートしていません）。 中央の構成オブジェクトをサポートしていなかったため、使用するすべての場所に3つまたは4つの属性を配置する必要がありました。 その後、そのライブラリから離れて（Materialツールチップの使用を開始）、すべてのツールチップを手動で交換する必要がありました。 それを「ラップ」する独自のディレクティブを作成できたとしたら、そのディレクティブを変更して、他のライブラリではなくホストに[mdTooltip]を適用するのと同じくらい簡単でした。

@MikeMatusz私もそれを念頭に置いていたようです。これは、 https： //github.com/angular/flex-layout/issues/162#issuecomment-290350270からの私のスニペットです。

@Directive({
  selector: 'fxLayoutFullPage',
  hostDirectives: [LayoutDirective],
  host: { 
    'fxLayout': 'column', 
    'style': 'min-height:100vh; background-color:yellow'
  }, 
}) class LayoutFullPageDirective {}

ディレクティブをインスタンス化するプロパティデコレータを作成することは可能でしょうか？
例えば：
@HostDirective(LayoutDirective) myLayoutDirective: LayoutDirective;

これは、コンポーネントとディレクティブで機能し、対話用のインスタンス参照を提供し、コンポーネント/ディレクティブから継承するときに失われることはありません。
入力バインディングとイベントバインディングも提供する場合は、さらに複雑になると思います。

これはどこにありますか？ 私はAngular2 / 4にかなり慣れていません。私がやりたいのは、他のいくつかのディレクティブを一度に適用するだけのディレクティブを作成することです。 その代わりに：

<button directiveA directiveB directiveC>BUTTON TEXT</button>

私はただ書くことができます：

<button customDirectiveABC>BUTTON TEXT</button>

これは簡単なはずだと感じます-基本的な構成/乾燥。 しかし、私が知る限り、それは不可能ですか？

https://github.com/angular/flex-layout/issues/76#issuecomment-310509013も参照して

@soynog 、私はまったく同じように感じます。 これがどこにあるのかも知りたいです。

私は動的にディレクティブを追加したい場所を私は（角度/素材＃1206はまだサポートされていないため）ドラッグ可能な角度素材を使用してダイアログとangular2-ドラッグを作ることができるように期待していたmd-dialog-containerというMdDialogサービスが作成しますが、動的ディレクティブのAngular1.xコンパイラーの動作をここで取得するのははるかに難しいようです。

@ tbosch 、 @ ThomasBurleson 、あなたが話し合ったオフラインのユースケースは、ThomasがAngular / Material＃1206で偶然に提起した問題や目標に関連していましたか？ 1.6.xフレームワークと2+フレームワークの間の動作の変化に頭を悩ませようとしています。

この問題に関する更新はありますか？ 当初は勢いを増していましたが、もう注目されていないと思います。

うん、それに関する更新はありますか？

これは私がひどく必要としているものです。この提案が彼の上流に到達することを願っています。

これは素晴らしいことですが、今日、プログラム的/動的にディレクティブを適用できないことに気づき、悲しくなりました。

+1
わたしも ：）
必要なすべてを実行するカスタムディレクティブにバインドする複数のディレクティブをラップする方法を探しています。 例えば ​​：

<my-cmp [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
 ...
</my-cmp>

すべての行をコピーして貼り付けることなく再利用できるように、すべてをラップするディレクティブを作成できれば便利です。

<my-cmp myCustomDirective>
</my-cmp>

そして私のカスタムディレクティブに

<ng-host [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
</ng-host>

今号2周年を迎えます！ 正直なところ、この機能は非常に便利なので、100万個のラッパーを作成しなくても、非常に構成しやすいコンポーネントやディレクティブを作成できます。 持っているディレクティブから必要なコンポーネントを作成するだけです。 シンプル、クリーン、効果的。

@ IgorMinar-とにかく、今後の機能強化のためにこの機能をレーダーで取得できますか？

そのような機能が悪いパターンと見なされるかどうかを知りたいのですが。 誰？

@ darkbasic -AFAIU、この機能がない場合、開発者は、テンプレートビューとコンテンツに親ディレクティブを追加するために、ラッパー要素（ ng-container ）を導入する必要があります。

いいえ、ラッパーを使用せずに独自のコンポーネントを完全に制御できることは悪いパターンではないと思います。 それは必需品です。

@bradlygreenコメントはありますか？

この機能は、このリポジトリのすべての未解決の問題の中で最も人気のあるリクエストです（トップ5ではないにしても）...インターネット全体で、事実上のフレームワークとしてのAngularの衰退に関するレポート（経験的データに裏打ちされた）が見られます...私は思いますコミュニティが聞いていないという感情を推進しているものの1つ。 競争; vue.jsとreactは、最も人気のあるリクエストされたアイテムについて少なくとも継続的なフィードバックを提供するために、必ずしもすべての人が望むすべての小さなことを実装しているとは限らないため、着実に進歩し、角度を超えています。 長い間待って何も聞こえないのはとてもイライラします。単純な「いいえ、私たちはそれをしません」でさえありません。

（ 「Angularslips」Jsフレームワークのセクションを参照してください）

... Angular / Vue / React / ...に関するいくつかの意見は、さまざまな要因の影響を受けていると思いますが...この具体的な機能は、何らかの形で実装する価値があります（状況が単なる適用されたディレクティブの簡単なリストを使用したソリューション）...したがって、Angularコアチームの具体的な位置は大歓迎です...🥇

特定のETAはありませんが、2018年のレンダラーでこのカテゴリのものをはるかに簡単にするために取り組んでいます。

うまくいけば、2018年に物事が劇的に良くなるでしょう。私たちは負けています

見る：

• https://www.businesswire.com/news/home/20180104005052/en/npm-Report-State-JavaScript-Reveals-Popular-Web
• https://medium.com/@chriscordle/why -angular-2-4-is-too-little-too-late-ea86d7fa0bae

@somomboこの記事はずっと前にでたらめであることが確認されました

実際に自分の作品を知っている人は作者をからかっており、誰も彼を真剣に受け止めていませんでした。

したがって、問題の事実は、ここでのこの問題は、Angularチームにとって非常に低い優先度であり、実際、可能な限り低い優先度です。

AngularHQで公開されている優先順位リストを参照してください（問題番号8785を探してください）

コメントの数が示すように、この問題がコミュニティから多くの議論と関心を生み出したにもかかわらず、これは事実です。

あなたがこの問題を気にかけていて、それが実装されることを本当に望んでいる人なら、待つ代わりに..正直なところ_潜在的に決して_、おそらくあなたは公式の年次角度調査に記入して、あなたがこの問題のように感じていることを知らせることができます優先度を高くする必要があり、後でではなく早く実行されることを確認していただければ幸いです。

Angularチームが行ったすべての素晴らしい仕事に感謝することを忘れないでください！

また、この機能に投票したいと思います。 これは、この問題を回避しようとする多くの悲しみの原因となっています。

@somomboは、AngularHQの優先順位をまだ読みすぎないでください。 優先順位の公式は完全には具体化されていません。 そうは言っても、v6が出荷された後、この機能要求を再検討する必要があると思います。 すぐに帯域幅がなくなるのではないかと思います。これに取り組むと、コンパイラ/コア領域ですでに進行中の作業と競合することになります。

これは迅速な修正リクエストではありません。 それを適切に行うにはかなりの努力が必要だと思いますが、v6で取り組んでいることで、これをはるかに簡単に実装できるはずです。

@IgorMinar Ivyの作業により、これがより実現可能になります。 しかし、はい、v6を過ぎました。

@IgorMinarと@mhevery私は、あなたの考えが何であるか、そしてこの問題が発生する前に最初に何が必要かについて、この具体的なフィードバックを私たちに与えてくれたことに、私がどれほど感謝しているかを十分に強調することはできません。適切に対処する。

素人にとって、「クイックフィックス」とは何か、そうでないものは必ずしも明確ではありません。 ただし、これはクイックフィックスタイプではなく、正しく実行する必要があるという事実を除けば、これがAngularの便利な機能になると感じているように思われることを特に感謝しています。

あなたはとても忙しく、すべての問題にこのように対応することはできないでしょう。
ですから、いつでも心から感謝しています。 私たちは興奮しており、Angular v6以降を楽しみにしています！

素晴らしい仕事をありがとう！

コンポーネントクラスにディレクティブクラスを拡張または実装させることができます。 内部でディレクティブを適用しようとしている場合、それはおそらくコンポーネント内のロジックである必要があります。

export class gBtn extends gTouch

@NateMay 、これでは単一のクラスのみを拡張できます。 この問題は、ディレクティブを使用した複数の機能の構成に関するものです。

@NateMayには2つの問題がありますもう1つは依存性注入を破ったことです。

私の2セントを追加するだけです。 @ uirouter / angularのネストされた状態を使用して、Angular、Material、Flex-layoutを備えたマルチレイヤーSPAを構築しています。 その場合、flexディレクティブをコンポーネント要素に簡単に適用できないことは非常に制限されます。

したがって、この機能に投票してください。

この追加機能の+1

ng-containerにディレクティブを追加することは可能ですが、これはDOMには表示されません。

交差オブザーバーAPI（要素がビューポートに出入りするときにイベントを発生させる）のためにこれが必要でした。 私が持っているintersector持っているディレクティブ、 enter()とleave()要素が見える/隠さなったときにイベントを。 このAPIを内部で使用する必要がある特定のコンポーネントがありますが、テンプレートにDIVを追加したくありませんでした。

だから私がしたことはcomponent.html次のこと

<ng-container intersector (enter)="weCameOnScreen()" (leave)="byeBye()">
     ... components normal template ...
</ng-container>

次に、 intersector.directive.tsディレクティブコンストラクターがElementRef挿入します。

    constructor(private intersectorElementRef: ElementRef) { ... }

通常のDOM要素の場合はintersectorElementRef.nativeElement操作するだけですが、 ng-containerの場合、ノードは実際にはコメントノードです。 だから私はそれがコメントであるかどうかを確認し、そうである場合はレベルを上げます。

public ngAfterViewInit(): void 
{
    // if the directive is applied to an ng-container must go a level up
    this.domElement = (this.intersectorElementRef.nativeElement.nodeType == 8) ? this.intersectorElementRef.nativeElement.parentElement : this.intersectorElementRef.nativeElement;

   registerIntersector(this.domElement ...);

これはすべての状況で機能するわけではありませんが、今のところは問題ありません。 IVYコンパイラでは、コメントを使用しなくなった可能性があるため、これが機能しなくなる可能性があります。 重要なことは、DOMノードで、またはディレクティブの偽の「 @HostBinding 」として効果的に使用できる単一のディレクティブがあることでした。

ディレクティブを動的に追加できることを本当に望んでいました。 低レベルのディレクティブを「高次」のより抽象的なディレクティブにカプセル化できるようにしたいと思います。 私はスタックオーバーフローについて次の質問をしました、そして私はこれに対する解決策が将来あるかどうか疑問に思いました： https ：

@mheveryが言ったように..私たちは思い出させなければなりません、それで彼らはそれを忘れないでください😉

これを購読します。 また、resolveComponentFactory / createComponentで作成したコンポーネントにディレクティブを動的にアタッチできる必要があります。

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentItem.component);

const componentRef = viewContainerRef.createComponent(componentFactory);
(<DynamicComponent>componentRef.instance).data = componentItem.data;
(<DynamicComponent>componentRef.instance).cssClassList = componentItem.cssClassList;
// Add directive to new component here
// componentRef.addDirective(someDirective)

すべてのアップデート？？？
サードパーティのディレクティブを使用している別のユースケースに遭遇しました
いくつかのシナリオでは、HTML要素のディレクティブを動的に削除/追加する必要があります。
これは何らかの方法で可能ですか、それとも解決策を保留していますか？

@micronyks ...実際にはディレクティブを動的に追加することはできません。 そのような機能を作成する可能性を追加するIvyを待つ必要があります。

@ mlc-mlapisですが、IVYはいつ来る予定ですか？ どのバージョンで？

@micronyks ...スケジュールによる

みんなここで合理的にしましょう、Angular Teamは非常に要求されているいくつかの巨大な機能（PWA、SSR、Ivy、そして特にカスタム要素）に一生懸命取り組んでいます、最後の機能は私が理解できるように非常に優先度の高い機能です大企業（マイクロソフトなど）の多くが永遠にそれを求めてきましたが、それには理由があります。 @mheveryが言ったように、効率的なカスタム要素を実現するには、Ivyを

その間、この機能を要求し続ける代わりに（私も絶望的に必要です）、ベータ版のテスト、バグの報告、ドキュメントの支援などによって、Angularチームがプロセスを加速するのを助けることができます。

Angular Teamはそれほど大きくはなく、すべての人のために素晴らしいフレームワークを作成しようとしているのはほんの数十人ですが、それには時間がかかることを忘れないでください。

...うん、今は少し辛抱強く、Ivyをもっと手伝うことができる瞬間まで待つ必要があります...コンパイラが完成し、いくつかの詳細な設計ドキュメントが利用可能になるとき。

@avatsaev私はあなたが言ったすべてに同意することができます。 ここで物事を要求するべきではありません。 ただし、Angularを使用するときに対処している問題を説明することはできます。

私は非常に経験豊富なAngular開発者であることにほど遠いですが、いくつかのことが間違っていると感じたり、十分に明確に説明されていません。

リークのある抽象化を行わずに、サードパーティのコンポーネント/ディレクティブをカプセル化したいので、この問題に遭遇しました。 これの一部は、動的なディレクティブを持つことを可能にすることです。 私を驚かせるのは、そのようなことを達成するのは非常に複雑だということです。

Angular MaterialとFlex-Layoutを使用してフォームジェネレーターを構築しています。これは、JSON構成を取得してフォームを生成します。 この機能は、実行時にflex-layoutディレクティブをホストコンポーネントに適用するのに役立ちます。 Angularの最大の資産の1つは、構成から実行時にコードを生成する機能であると感じています。これは、そのコードをより用途の広いものにするのに大いに役立ちます。 良いユースケースに立ち寄りたかっただけです。 せっかち ;）

それが私の正確なユースケースです

@NateMayはここだ、あなたがそれをチェックアウトしたい場合は、私の実装。

@NateMayはここだ、あなたがそれをチェックアウトしたい場合は、私の実装。

説明してもらえますか？ 私はあなたがdynamic-field.directiveを意味すると思います

dynamic-field.directiveは派手なことをしますが、他にもたくさんのことが起こっています。 ルートフォルダにCONTRIBUTING.mdを追加しました。このフォルダには、ローカルでセットアップする手順が記載されています。 数か月間本番環境にあるものでの使用には注意してください。 安定した実装に向けて大きな変化を遂げています。

+1

はるかに、私の回避策は、それらすべてに欠点があります。

1. has-it 、新しいメンバープロパティをコンポーネントクラス内のそのディレクティブとして定義し、コンストラクター関数を呼び出すときに必要なすべてのコンストラクター引数をそのディレクティブに渡します（例：ElementRef、ViewContainerRef、TemplateRef ...要求される注入可能な変数） 、および現在のコンポーネントの対応するライフサイクルコールバック関数でngInit() ngAfterViewInit()ように、ライフサイクルコールバックがある場合は手動で呼び出します。

@component(...)
class MyComponent {
   theDirective: TargetDirective;
   constructor(el: ElementRef) {
       this.theDirective = new TargeDirective(el);
   }

  ngOnInit() {
     this.theDirective.ngOnInit();
  }
  ...
}

1. トップレベルのng-template内のコンポーネントテンプレート内のすべてをラッパーし、
   <ng-template><div targetDirective>....</div></ng-template> 、次のようにngAfterViewInit()レンダリングします。

const vf = this.viewContainerRef.createEmbeddedView(this.templateRef);
vf.detectChanges();

このようにして、Angularは、そのディレクティブと、DOMツリーの元のコンポーネント要素の直後にあるコンポーネントの実際のコンテンツを含む別のelementを作成します。

<my-component></my-component>
<div targetDirective>....</div>

この方法は、 <route-outlet>が行うことと似ています。

明らかな副作用があります

これがIvyで可能になったかどうかを誰かが確認できますか？ もしそうなら、誰かが例を持っていますか？

Angular Teamはそれほど大きくはなく、すべての人のために素晴らしいフレームワークを作成しようとしているのはほんの数十人ですが、それには時間がかかることを忘れないでください。

貢献者のコミュニティを持つことで、より大きくなる可能性があります。

ただし、これに対する貢献された修正が受け入れられる可能性は非常に低いです。

その代わりに、私たちは十数人に戻ってきました。

これがIvyで可能になったかどうかを誰かが確認できますか？ もしそうなら、誰かが例を持っていますか？

まだ言葉がないので、私が見つけた最も近いものを提供すると思いました。それは、Ivyでミックスインを実装することについてのしばらく前の記事です： https ：//blog.nrwl.io/metaprogramming-higher-order-components

記事によると、このスレッドの元の問題の可能な解決策は、「機能」と呼ばれる新しい機能を使用することだと思います。

...この機能についてGoogleに何かを試みるのは少し悪夢だと想像できます。 彼らがすぐにいくつかの公式アイビードキュメントをリリースすることを願っています！ :)

@nayfinはビジュアルフォームデザイナー/ビルダーも構築しています
そして、事実に固執するために数ヶ月働いた後、動的に追加されたdivにディレクティブをデプロイする方法がありません....いくつかのMyDirectiveFactory :: apply（HTMLElement）を呼び出すのはそれほど気にしないはずです

この機能は、トップレベルのディレクティブを添付するために常に単一のdivを作成しているので、圧倒的に歓迎されます。 さらに、flex-layoutディレクティブが必要な場合は、その1回限りのdivも作成する必要があります。これを行う代わりに、ホスト要素に直接アタッチできると便利です。

次のようなディレクティブを動的に追加できると非常に便利です。

const msked = componentFactory.createDirective(MaskedInputDirective);
msked.textMaskConfig = {};
this.elementRef.directives.add(msked);

さらに、flex-layoutディレクティブが必要な場合は、その1回限りのdivも作成する必要があります。これを行う代わりに、ホスト要素に直接アタッチできると便利です。

@tsteuwerいつでも

しかし、ええ、ホスト要素にディレクティブを適用する機能も必要です。 ホスト要素をスクロール可能にし、Angular MaterialCDKからCdkScrollableを適用するのに役立ちます。

トップレベルのng-template内のコンポーネントテンプレート内のすべてをラッパーします

これに少し滑らかな代替手段は、 https：//github.com/trotyl/angular-contribを使用して追加することです

host: { ngNoHost: '' }

このプロジェクトは、レンダラーをシムし、親のないngNoHost属性を持つ要素の子をレンダリングします。

もちろん、同じ欠点がたくさんあります。

残念ながら、これは3年経ってもまだ開いています。 ホスト要素にバインドされたディレクティブは、コードの再利用性を実際に向上させます。

さらに、flex-layoutディレクティブが必要な場合は、その1回限りのdivも作成する必要があります。これを行う代わりに、ホスト要素に直接アタッチできると便利です。

@tsteuwerいつでも

しかし、ええ、ホスト要素にディレクティブを適用する機能も必要です。 ホスト要素をスクロール可能にし、Angular MaterialCDKからCdkScrollableを適用するのに役立ちます。

理想的ではありませんが、次のようにプログラムでCdkScrollableを作成できます。
this.scrollable = new CdkScrollable（this.elementRef、this.scrollDispatcher、this.zone）;
this.scrollable.ngOnInit（）;

あなたもそれを手動で破壊しなければなりません：
if（this.scrollable）{
this.scrollable.ngOnDestroy（）;
}

https://github.com/angular/angular/issues/8785#issuecomment -361004682 IgorMinar Ivyの作業により、これがより実現可能になります。 しかし、はい、v6を過ぎました。

@mheveryコメントのフォローアップ：point_up_2：、Ivyがついに完全に着陸したので、v10のリリース時（またはそれ以前）にこの機能を使用できますか？ そうでない場合は、他の考慮事項がこれをさらに妨げる可能性があることをお知らせください。

変更はありますか？

この特定の機能がAngularサーベイhttps://twitter.com/angular/status/1252646001162088448?s=20にあった場合、それがトップ投票のエントリになると思います。

上位に投票される機能はたくさんあります。これは確かですが、 @outputや他の多くのObservablesも使用しています。 残念ながら、現在のペースでは、それらは実装されません。

この特定の機能がAngularの調査にあった場合、私はそれがトップ投票のエントリになると思います。

素晴らしいアイデア@princemaple！

理想的ではありませんが、これは実際には調査の「追加コメント」セクション（質問2）で対処できます。
それが言うところ：

"How else should we improve Angular for you?"

したがって、基本的に、この機能の表示に関心のある方は、アンケートに回答して明示的にお知らせください。「問題＃8785」が実装および解決されていることを確認してください。

調査への直接リンクは次のとおりです。
https://goo.gle/angular-survey-2020

力があなたと共にありますように！ 🙂

私もプログラムでコンポーネントに機能を追加する方法に苦労しました。正直なところ、ここでの提案のいくつかは、これらの特定の問題に取り組むための最良の方法のように思えます。

私はその記事に関して角度のあるチームメンバーと話をしました

これがIvyで可能になったかどうかを誰かが確認できますか？ もしそうなら、誰かが例を持っていますか？

まだ言葉がないので、私が見つけた最も近いものを提供すると思いました。それは、Ivyでミックスインを実装することについてのしばらく前の記事です： https ：//blog.nrwl.io/metaprogramming-higher-order-components

そして基本的に、これはAngularの内部をハッキングしているという印象につながりました。実際、これは通常のユーザー消費向けに設計されたものではありません。

私たちがこれを行うことができない技術的な理由が存在するかどうかはわかりませんが、これを行う能力があれば、Angularで日々を劇的に改善できると思います。

「私たちはコミュニティとの協力への投資を劇的に増やしました。 過去3週間で、未解決の問題の数は、フレームワーク、ツール、およびコンポーネント全体で700を超える問題が減少しました。 2,000を超える問題に触れており、今後数か月にわたって大規模な投資を行い、コミュニティと協力してさらに多くのことを行う予定です。」 — @StephenFluin
Angular10アナウンスから

つまり、これは、この問題がv11で解消されることを意味すると思いますか？ 🤞😏

彼らの最も要求された機能の1つを追加することに取り組むよりも、「コミュニティと協力する」（そして彼らをなだめる）ためのより良い方法は何でしょうか！？ （これ😉）

あの人達の話を聞いて！

期待を設定するためだけに、あなたが求めているのは些細な作業量ではなく、現在のデータ構造は実際にはこのために設計されていません。 したがって、このようなものをサポートするには、いくつかの主要なエンジニアリングが必要になります。

@mheveryテンプレートの親からそれらを適用するのとどう違うのですか？

@ k3nsei NgModule観点から見る必要があります。これは、実際には、すべてのコンポーネントのインフラストラクチャを作成する重要な要素です。

@ mlc-mlapis @HostBindingと@HostListenerがあるので、おそらく@HostDirectiveがその機能に適しています。 Ivyapisがそのような機能を可能にするという話を見たことがあります。

私にとって重要な点は、再利用可能な機能のジャンクを備えた拡張機能/特性を持つ機能を備えた、より分離されたクラスを持つことを可能にするいくつかの構成APIを持つことです。 たとえば、選択可能、拡張可能/折りたたみ可能のように。

@ k3nsei可能性はありますが、動的すぎないかどうかは

「期待を設定するだけで、あなたが求めているのは些細な作業量ではなく、現在のデータ構造は実際にはこのために設計されていません。したがって、このようなものをサポートするには、いくつかの主要なエンジニアリングが必要になります。」 — https://github.com/angular/angular/issues/8785#issuecomment -654391378

@mheveryのタイムリーな返信ありがとうございます。

これが非常に大きな挑戦になることは私たちにまったく失われていないと言って、私はコミュニティのために話すつもりだと思います。 そうでなければ、これを適切に（どういうわけか）実現するサードパーティのライブラリをいくつか作成していたはずです。 [私の知る限り、何もありません]。

また、言うまでもありませんが、これに貢献するために私たちが支援できる、ぶら下がっている果物（またはその他）があるかどうかをお知らせください。

私たちは心から感謝し、あなたの真剣なコミュニケーションを大切にし、私たちが必要なものと追加する現実的/実用的なものについての対話の一部であり続けることを願っています。

私の理解では、アイビーはこれを以前より簡単にします。

@mhevery

@IgorMinar Ivyの作業により、これがより実現可能になります。 しかし、はい、v6を過ぎました。

私の理解では、アイビーはこれを以前よりも簡単にします

私の新しい理解は「簡単」はまだ「簡単」を意味するものではありません

私の新しい理解は「簡単」はまだ「簡単」を意味するものではありません

アイビー：あなたが2年間費やしたもので、まだ最も人気のあるAngularの問題のいずれにも対処していません。

アイビー：あなたが2年間費やしたもので、まだ最も人気のあるAngularの問題のいずれにも対処していません。

@pauldraperこの特定の問題は彼らのレーダーにも載っていないので、私たちの問題は彼らの「問題」ではないと思います（ロードマップhttps://angular.io/guide/roadmapを参照）。

個人的に私のために、私は私がオープンソースが、その方向コミュニティ（ユーザー）に本当の影響力を持っているプロジェクトだけでなく、のプロジェクトのために他の場所で検索するために、その時間を考えます。

@pauldraperこの特定の問題は彼らのレーダーにも載っていないので、私たちの問題は彼らの「問題」ではないと思います（ロードマップhttps://angular.io/guide/roadmapを参照）。

@somomboこの問題が何年にも

ロードマップの最初のポイントは、オープンなgithubの問題の処理について明確に述べています。 それらすべてをロードマップにリストすることはあまり意味がありませんね。 この問題は最も賛成された（または最も賛成された）問題の1つであり、最終的に解決されることを願っています。

いいえ、これは単なる希望的観測です。https：//github.com/angular/angular/issues/5689を読んで

@pauldraperこの特定の問題は彼らのレーダーにも載っていないので、私たちの問題は彼らの「問題」ではないと思います（ロードマップhttps://angular.io/guide/roadmapを参照）。

@somomboこの問題が何年にも

すべて同じ..私は待っていました..この問題は文字通り私にとって大きな障害となっています。 ですから、すぐに計画されているようには見えないという事実は、私が個人的に先に進む時が来たことを意味します。 他のみんなに幸運を祈ります。

これを「ディレクティブへのディレクティブ追加のサポート」に名前を変更してほしい。 その名前は紛らわしいかもしれませんが、この機能がコンポーネントに限定されるのではなく、ディレクティブで機能することが重要だと思います。 この機能の他の名前は、「暗黙のディレクティブ」または「アタッチされたディレクティブ」である可能性があります。つまり、テンプレートで特定のコンポーネントまたはディレクティブを使用すると、ホスト要素の暗黙/アタッチされたディレクティブがプルされます。

主に、継承と比較して、構成がAngularでの再利用のよりクリーンな形式である可能性があるため、これを何度も望んでいました。 継承は、多重継承がなく、コンストラクターパラメーターを渡す必要があり、一部のAngular機能は継承時に機能し、その他は各リーフクラスで「再接続」する必要があるため、不格好になる可能性があります。

「暗黙的/アタッチされたディレクティブ」がコンポーネントローカルまたはディレクティブローカル形式のディレクティブインスタンス化のように機能することを想像します。これにより、ディレクティブセレクタがテンプレートマークアップに存在しなくても、ホスト要素でディレクティブがインスタンス化されます。

次に例を示します。

@Directive({
  selector: 'app-popup',
  attachDirectives: [
    FocusAreaDirective
  ]
})
export class PopupDirective {

  // Attached directives can be injected, just like template-declared directives today
  constructor(public focusArea: FocusAreaDirective) {
  }

}

アタッチされたディレクティブの@Input()および@Output()プロパティはテンプレートで使用でき、アタッチされたディレクティブのライフサイクルメソッドはホストコンポーネントのライフサイクルの一部として呼び出す必要があります。 アタッチされたディレクティブは、ホスト要素にバインドすることもできます。 基本的に、これは今日のテンプレート宣言ディレクティブとまったく同じように機能しますが、テンプレートで宣言する必要はありません。

この機能はAngularに大きなメリットをもたらし、ディレクティブの構成を介してよりクリーンでシンプルなコンポーネントアーキテクチャを実現できると思います。

現在、同様の形式のディレクティブの再利用が必要な場合は、2つの選択肢があります。

• 関連するディレクティブのセットが常にテンプレートマークアップで一緒に宣言されることを要求します。 必要なディレクティブがコンストラクターに存在しない場合は、エラーを検出してスローします。 必要なディレクティブが同じ要素で宣言されていることを要求する方法はありません。 これは、テンプレートの作成とドキュメントの観点からは厄介であり、冗長性のために強力なAPIやコントラクトではありませんが、それ以外の点ではひどいものではありません。
• ホストディレクティブ内でアタッチされたディレクティブを手動でインスタンス化し、コンストラクターパラメーター、@ Input / @Outputプロパティ、ホストバインディング、およびライフサイクルメソッドを内部ディレクティブに

別の言い方をすれば、この機能がないために、クリーン+シンプルコンポーネントの使用とクリーン+シンプルコンポーネントのオーサリングの間に不必要なトレードオフが生じることがあります。

@johncrim
実際の場合、カスタムディレクティブには入力があり、それらを変換して、アタッチされたディレクティブへの入力として渡す必要があることに注意してください。 おそらくこれは、ディレクティブデコレータオプションのhost属性に似た構文で実行できます。

@amakhrov ：良い点-わかりやすくするために、例から入力を除外しました。 これが必要なほとんどの場合、添付されたディレクティブの入力（または出力）を変換する必要はありません-それらは（理想的には）構成可能な単位として機能し、それらの入力（または出力）値はテンプレートからバインドできます親ディレクティブ（またはコンポーネント）を使用します。

名前の競合または名前の明確さの問題がある場合（構成のディレクティブを設計するときに避けようとします）、または入力または出力を変換する必要がある場合は、添付されたディレクティブを親に挿入することで非常に簡単に処理できますディレクティブを作成し、アタッチされたディレクティブに委任する新しい入力または出力プロパティを親に作成します。

私は正直に立っています。
この問題は現在、公式ロードマップの「将来」セクションにリストされています。 https://angular.io/guide/roadmap#support-adding-directives-to-host-elementsを参照して

ホスト要素へのディレクティブの追加をサポート

長年の機能要求は、ホスト要素にディレクティブを追加する機能を追加することです。 この機能により、開発者は継承を使用せずに、追加の動作で独自のコンポーネントを拡張できます。 このプロジェクトでは、APIの定義、セマンティクス、および実装に関してかなりの労力が必要になります。

気付いたばかりなので、いつ追加されたかはわかりませんが、これは素晴らしいニュースであり、有意義で心強いジェスチャーであることを認めます。 指を交差させ続けます。

そこに置いてくれたチームに感謝します！ 🙏🏾