0Pricing
Angular Academy · レッスン

InputsとOutputsの公開

ホストディレクティブのInputsとOutputsを公開します

「InputsとOutputsの公開」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

合成したAPIの公開

hostDirectivesを介してディレクティブを合成すると、その入力と出力はデフォルトで非公開になります。合成APIを使うと、選択した入力と出力をホストの公開APIに公開できます。

オブジェクト形式

クラスだけを列挙する代わりに、directive、inputs、outputsの配列を持つオブジェクトを使用します。

hostDirectives: [{
  directive: TooltipDirective,
  inputs: ['tooltipText'],
  outputs: ['tooltipShown']
}]

入力の公開

入力名をinputsに列挙すると、利用側からホスト要素にバインドできるようになります。

<app-button tooltipText="Save changes"></app-button>

出力の公開

出力を列挙すると、そのディレクティブのイベントがホストから再発行されます。

<app-button (tooltipShown)="onShown()"></app-button>

公開時の名前変更

publicName: internalName形式を使うと、入力または出力を公開時に名前変更できます。

inputs: ['tooltipText: hint']
// consumers bind [hint]="..."

出力の名前変更

出力も同じ方法で名前を変更できます。

outputs: ['tooltipShown: shown']
// template: (shown)="..."

デフォルトで非公開にする理由

合成した入力や出力を非公開にすると、ホストのAPIを意図したものだけに保てます。利用側にとって意味のあるものだけを公開し、内部ディレクティブの詳細が漏れるのを防ぎます。

独自の入力との組み合わせ

ホストは、公開された入力と独自の入力を併せ持てます。Angularはそれらを要素上の1つの公開APIに統合します。

@Component({
  selector: 'app-button',
  hostDirectives: [{
    directive: TooltipDirective,
    inputs: ['tooltipText']
  }]
})
export class ButtonComponent {
  label = input('');
}

名前の衝突

公開した入力名がホスト独自の入力名と衝突する場合は、名前を変更することで競合を避け、意図を明確にできます。

双方向バインディング

合成を通じて双方向バインディングをサポートするには、入力と、それに対応するChange出力の両方を一貫した名前で公開します。

ベストプラクティス

利用側に必要な、最小限で分かりやすいAPIだけを公開します。内部名は、基盤となるディレクティブではなく、コンポーネントの用語に合わせて変更します。

確認問題

入力と出力の公開についての理解を確認します。

まとめ

hostDirectivesのオブジェクト形式を使うと、選択したinputsとoutputsをホストのAPIに公開でき、必要に応じてpublicName: internalName形式で名前を変更できることを学びました。これにより、公開するAPIを意図したものだけに保てます。

よくある質問

「InputsとOutputsの公開」レッスンは無料ですか？

はい。「InputsとOutputsの公開」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「InputsとOutputsの公開」で何を学びますか？

ホストディレクティブのInputsとOutputsを公開します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「InputsとOutputsの公開」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. hostDirectivesプロパティ
  2. InputsとOutputsの公開
  3. 再利用可能な振る舞いの構築
  4. コンポジションと継承
← Angular Academyに戻る