Angularでコンポーネントにテンプレートを渡す

この記事では、Angular がコンポーネントにテンプレートを渡すための 2 つのメソッドを主に紹介します。1 つ目は、NgTemplateOutlet 命令です。これを必要とする友人は、それを参照してください。日付ピッカーコンポーネントは、将来発生する可能性のあるさまざまなニーズに応えるために、コンポーネントのスタイルを高度にカスタマイズできる必要があります。この目標を達成するには、休日のマークなど、日付ピッカー コンポーネントの外部の各日付グリッドに表示されるコンテンツを制御できる必要があります。このとき、コンポーネントのテンプレートの一部は呼び出し側で提供する必要があります。

React では、この要件は date => Element のような関数を実装するだけです。ただし、Angular テンプレートは純粋なテンプレートであり、この機能を実現するにはいくつかの特殊な概念を使用する必要があります。

date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。

第一种方式 d553bd28b5bbbbd4b6fb4990edbabbf0

d553bd28b5bbbbd4b6fb4990edbabbf0 这个标签到本文撰写时为止，还没有官方的文档，甚至连占位符都没有。但是这并不妨碍我们的使用，外国热心网友已经总结出了 d553bd28b5bbbbd4b6fb4990edbabbf0 在现阶段的特点与作用。

基本用法

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

假设我们有一个上述的组件，然后向下面这样调用：

<wrapper>
  <span> World </span>
</wrapper>

那么最终的渲染结果将会是这样的：

<p>
  hello
  <span> World </span>
</p>

看起来就是发生了很简单的替换，但是如果在 Wrapper 中出现了多个 d553bd28b5bbbbd4b6fb4990edbabbf0 会出现多个 45a2772a6b6107b401db3c9b82c049c2 World 54bdf357c58b8a65c66d7c19c8e4d114 吗？答案是不会的。d553bd28b5bbbbd4b6fb4990edbabbf0 的本质只是移动元素，并不会去自动的创建传入的模板，所以就算用 ngFor 套住 d553bd28b5bbbbd4b6fb4990edbabbf0 也不会出现很多个 45a2772a6b6107b401db3c9b82c049c2 World 54bdf357c58b8a65c66d7c19c8e4d114。如果传入的是自定义的组件，这些组件也只会被实例化一次。

进阶用法

当然，如果 d553bd28b5bbbbd4b6fb4990edbabbf0 的功能仅仅只是这样就显得太鸡肋了，在使用 d553bd28b5bbbbd4b6fb4990edbabbf0 的时候可以指定一个选择器，这个选择器可以捕获相符的直接子元素。例如：

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</p>

然后像下面这样使用：

<wrapper>
  <span> World </span>
  2333
</wrapper>

最终的渲染结果将会是这样：

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

除了设置 ng-content 标签的 select 属性之外，还可以在子元素上使用 ngProjectAs 属性，这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子：

<wrapper>
  <p ngProjectAs="span"> World </p>
  2333
</wrapper>

这次被传入的模板变成了一个 p，但是因为设置了 ngProjectAs，所以“World”会出现在分割线下方。

第二种方式 NgTemplateOutlet 指令

使用 ng-content 确实可以起到传入模板的效果，但是却有个很致命的问题，就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中，就需要使用到 NgTemplateOutlet 指令。

基本使用

这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象，同时，在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建，举个例子：

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: &#39;World&#39;};
}

ng-container 是一个虚拟的元素，在这个元素上我们使用了一个 NgTemplateOutlet 指令，指定了要实例化下面的名为 name 的 ng-template。同时把 myContext 这个对象作为实例化的数据上下文传入，所以最终就会显示 “Hello World!”。值得注意的是在 ng-template 里面获取传输的数据上下文的方式：let-variableName='key'最初の方法d553bd28b5bbbbd4b6fb4990edbabbf0

d553bd28b5bbbbd4b6fb4990edbabbf0 この記事の執筆時点では、このタグは、プレースホルダーでもありません。しかし、これは私たちの使用に支障をきたすものではありません。

基本的な使い方

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: &#39;World&#39;};
}

上記のコンポーネントがあり、それを次のように呼び出すとします:

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

すると、最終的なレンダリング結果は次のようになります:

rrreee

非常に単純な置換が行われたように見えますが、もしWrapper に複数の d553bd28b5bbbbd4b6fb4990edbabbf0 が表示される場合、複数の World 54bdf357c58b8a65c66d7c19c8e4d114 が表示されますか?答えはいいえだ。 d553bd28b5bbbbd4b6fb4990edbabbf0 の本質は要素を移動するだけであり、受信テンプレートを自動的に作成するわけではないため、ngFor を使用して d553bd28b5bbbbd4b6fb4990edbabbf0 をラップしたとしても、 code> 45a2772a6b6107b401db3c9b82c049c2 World 54bdf357c58b8a65c66d7c19c8e4d114 はあまりありません。カスタム コンポーネントが渡される場合、これらのコンポーネントは 1 回だけインスタンス化されます。

高度な使い方

もちろん、d553bd28b5bbbbd4b6fb4990edbabbf0 の関数がこのままでは、d553bd28b5bbbbd4b6fb4990edbabbf0 を使用する場合はあまりにも役に立ちません。 セレクターを指定すると、このセレクターは一致する直接の子要素をキャプチャできます。例:

rrreee 次に、次のように使用します: rrreee

最終的なレンダリング結果は次のようになります:

rrreee ng-content タグの select 属性を設定することに加えて、次のことができます。子要素にも設定します。要素の ngProjectAs 属性を使用します。これにより、この要素が親要素で指定された ng-content によってキャプチャされるようになります。例: rrreee

今回渡されたテンプレートはpになりますが、ngProjectAsが設定されているため、分割線の下に「World」が表示されます。 🎜🎜🎜 2 番目の方法 NgTemplateOutlet コマンド🎜🎜🎜 ng-content を使用すると、確かにテンプレートを渡す効果がありますが、はありません。非常に致命的な問題があります。つまり、データを受信テンプレートに渡すことができません。受信テンプレートにデータを渡すには、NgTemplateOutlet ディレクティブを使用する必要があります。 🎜🎜🎜基本的な使用法🎜🎜🎜 このコマンドを使用して、テンプレート内の指定された場所に TemplateRef オブジェクトをインスタンス化することができます。同時に、インスタンス化プロセス中にデータ オブジェクトを渡すこともできます。 TemplateRef は ng-template タグを通じて作成できます。例: 🎜rrreee🎜ng-container は、NgTemplateOutlet ディレクティブを使用してインスタンス化するオブジェクトを指定します。 ng-template の名前は以下のとおりです。同時に、myContext オブジェクトがインスタンス化されたデータ コンテキストとして渡されるため、最終的には「Hello World!」が表示されます。 ng-template で送信されたデータ コンテキストを取得する方法: let-variableName='key' に注目してください。 🎜🎜🎜高度な使用方法🎜🎜🎜 次のステップは、この記事の冒頭で説明した要件を実装し、コンポーネントの外にテンプレートを渡します。例として上記の例を見てみましょう。テンプレートを外部からサブコンテンツとして渡す必要があるため、ここでは必要に応じて ContentChild を使用する必要があります。変更により、外部の世界からコンポーネントを作成できます。テンプレートは受け入れられました。試してみましょう: 🎜rrreee🎜上記は私がまとめたもので、将来的には誰にとっても役立つことを願っています。 🎜🎜関連記事: 🎜🎜🎜vue.jsで動的にバインドされたラジオリストを一括編集する方法🎜🎜🎜🎜Reactコンポーネントを使用してVueコンポーネントを転送するときに記述するコマンドは何ですか? 🎜🎜🎜🎜JavaScriptでコンテンツをクリップボードにコピーする方法🎜🎜

以上がAngularでコンポーネントにテンプレートを渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。