Angularアプリ全体でng-templateの共有にアプローチするにはどうすればよいですか？

バックエンドエンドポイントから受け取ったルックアップの一致を示す「角度」のタイプアヘッドコンポーネントがあるとします。私はマッチアイテムのスタイルを設定したいので、ng-template、ngTemplateOutlet、ngTemplateOutletContextでこれを行うことができます。Angularアプリ全体でng-templateの共有にアプローチするにはどうすればよいですか？

ここに問題はありません。

DRYアプローチを適用し、このng-templateを再利用可能にするにはどのようにして、それを使用したいすべてのコンテナに貼り付ける必要はありませんか？

更新：同時に、別のテンプレートを必要とする他のタイプのエンティティにもタイプアウトコンポーネントを使用したいと考えています。

コードを要求していないので、私は一般的なアプローチについて質問しています。

出典

2017-08-11 user776686

再利用可能なコンポーネントに目的のHTMLを追加します。そのコンポーネントにセレクタを与えます。次に、そのセレクタを必要とするHTMLテンプレートで使用します。

ここには、pm評価の代わりに星印を表示するコンポーネントがあります。私は別の場所で同じ先行入力を使用する代わりに見上げた場合、その後

<pm-star [rating]='product.starRating' 
     (ratingClicked)='onRatingClicked($event)'> 
</pm-star>

出典

2017-08-11 17:45:01 DeborahK

おかげで、そして：だから、このテンプレートで定義されたコードは、それを必要とする任意のコンポーネントに含めることができ

import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'pm-star', templateUrl: './star.component.html', styleUrls: ['./star.component.css'] }) export class StarComponent implements OnChanges { @Input() rating: number; starWidth: number; @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>(); ngOnChanges(): void { this.starWidth = this.rating * 86/5; } onClick(): void { this.ratingClicked.emit('The rating ${this.rating} was clicked!'); } }

タイプAのアイテムを提示し、タイプBの現在のアイテムを検索したい - バインディングのためにタイプBのテンプレートをどのように配信すべきですか？ – user776686

@inputパラメータとして渡します。再利用可能なビルドに関するドキュメントをチェックしてください（https://angular.io/guide/component-interaction#component-interactionまたは「Pluralsight」でStarコンポーネントをどのように構築したかをご覧ください）コースはこちら：https://app.pluralsight.com/library/courses/angular-2-getting-started-update – DeborahK

Angularアプリ全体でng-templateの共有にアプローチするにはどうすればよいですか？

答えて

関連する問題