Angular での NgTemplateOutlet ディレクティブの理解と使用法について話しましょう

この記事では、Angular の NgTemplateOutlet ディレクティブについて説明し、構造ディレクティブ NgTemplateOutlet の理解と応用について紹介します。

最近、トレーニング プロジェクトを見ていたときに、この NgTemplateOutlet 構造ディレクティブを目にしましたが、これまで一度も目にしたことはありませんでした。それについては知っていますが、どうやって使用するのでしょうか? 次に、公式 Web サイトにアクセスしてこの API を検索しました (公式 Web サイトのリンクはここをクリック)。

しかし、API の説明がわかりません。いわゆるコンテキスト オブジェクトが何なのかもわかりませんし、let 変数が何なのかもわかりません。それから丸一日ドキュメントをめくってメモを取った後、ついにこれが何であるかを理解しました。まだ理解していない友人は、私の前回の記事を参照してください: [Angular Learning] テンプレート入力変数について (let-変数) 理解

この記事では、NgTemplateOutlet の使用法と使用シナリオについてのみ説明します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

使い方

公式 Web サイトによると、この API は次のとおりです:

準備された TemplateRef に基づいてインライン ビューを挿入します。

私が 翻訳します: NgTemplateOutlet のホスト要素をインライン ビューにします - このインライン ビューは、事前定義された ## に基づいています。 #templateRef テンプレート参照が生成されます。ホスト要素がどのような要素であっても、レンダリングされません。

公式 Web サイトの例を変更してみましょう (公式 Web サイトが理解できないため):

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

    <ng-template #one><span>Hello</span></ng-template>
    <ng-template #two let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #three let-person="lastName">My name is <span>LeBron {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: &#39;World&#39;, lastName: &#39;James&#39;};
}

A host element can use the

ngTemplateOutlet 構造ディレクティブを使用して、次のようにします。それ自体は、任意の テンプレートによって生成されたインライン ビューになります。そして、context object をそれに設定できます。次に、このテンプレートで let-variable テンプレート入力変数を使用して、コンテキスト オブジェクトの値を取得できます。このテンプレートはより柔軟です。

アプリケーション シナリオ

ng-zorroと同様このフレームワークのページング コンポーネントPagination(公式ウェブサイトリンク＃ ＃＃）。デフォルトの前のページと次のページのスタイルや構造に満足できず、自分で調整したい場合は、入力属性 (@Input で定義された属性) を提供してテンプレートを受け取り、それに必要なプロパティを提供することができます。方法。この場合、コンポーネントのソース コードを変更せずにコンポーネントを再利用できます。

デモ

最初にサブコンポーネント

HeroDisplayCard

、キャラクターの表示インターフェイス <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@Component({ selector:&amp;#39;app-hero-display-card&amp;#39;, template:` &lt;h2 id=&quot;角色列表&quot;&gt;角色列表&lt;/h2&gt; &lt;ul class=&quot;hero-card-box&quot;&gt; &lt;li class=&quot;hero-card-item&quot; *ngFor=&quot;let h of heroesList&quot;&gt; &lt;p [style]=&quot;{textAlign:&amp;#39;center&amp;#39;}&quot;&gt; 角色id：{{h.id}}-- 角色名字：{{h.name}}-- 角色属性：{{h.features}} &lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; `, styles:[ `.hero-card-box{ width: 600px; margin: 10px auto; } .hero-card-item{ list-style: none; } ` ] }) export class HeroDisplayCard { public heroesList = [ {id:&amp;#39;013&amp;#39;,name:&amp;#39;钟离&amp;#39;,features:&amp;#39;rock&amp;#39;}, {id:&amp;#39;061&amp;#39;,name:&amp;#39;烟绯&amp;#39;,features:&amp;#39;fire&amp;#39;}, {id:&amp;#39;022&amp;#39;,name:&amp;#39;迪奥娜&amp;#39;,features:&amp;#39;ice&amp;#39;}, {id:&amp;#39;004&amp;#39;,name:&amp;#39;诺艾尔&amp;#39;,features:&amp;#39;rock&amp;#39;}, ] }</pre><div class="contentsignin">ログイン後にコピー</div></div> を定義してから、このコンポーネントを導入します。親コンポーネント内:

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card></app-hero-display-card>
  `
})
export class TemplateOutletAppDemoComponent {}

コードを実行すると、次のような効果が得られます:

## この li## のスタイルだと思います。 # は本当に醜いし、順序も正しくありません。キャラクター名の前にキャラクターの属性を入れたい。この場合、単純に属性を入力してスタイルを変更するのは非常に面倒で、ユーザーが選択できるように多くの変数を定義する必要があり、それが利点を少し上回る可能性があります。では、必要なデータのみを提供すればよいので、テンプレートをユーザーに直接提供しないのはなぜでしょうか。スタイルとレイアウトの自由はユーザーに任されています。

したがって、サブコンポーネント HeroDisplayCard については、次のように変更できます:

@Component({
  selector:'app-hero-display-card',
  template:`
    <h2 id="角色列表">角色列表</h2>
    <ul class="hero-card-box">
      <ng-container *ngFor="let h of heroesList">
        <!-- 如果没有传入cardItemTemplate则显示默认 -->
        <li class="hero-card-item" *ngIf="!cardItemTemplate">
          <p [style]="{textAlign:&#39;center&#39;}">
            角色id：{{h.id}}--
            角色名字：{{h.name}}--
            角色属性：{{h.features}}
          </p>
        </li>
        <!-- 如果传入了自定义模板，则显示出来，鉴于angular的结构型指令不能在同一个宿主元素上的规定，于是这样写 -->
        <ng-container *ngIf="cardItemTemplate">
		  <!-- 将自定义模板的上下文对象设置为h -->
          <ng-container *ngTemplateOutlet="cardItemTemplate;context:h"></ng-container>
        </ng-container>
      </ng-container>
    </ul>
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef<any>;
  public heroesList = [ // 省略]
}

次に、カスタム テンプレートを親コンポーネントに渡します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@Component({ selector:&amp;#39;app-templateoutlet-app-demo&amp;#39;, template:` &lt;app-hero-display-card [cardItemTemplate]=&quot;myCardTemplate&quot;&gt;&lt;/app-hero-display-card&gt; &lt;!-- 将模板引用变量myCardTemplate传入子组件 --&gt; &lt;ng-template #myCardTemplate let-id=&quot;id&quot; let-name=&quot;name&quot; let-features=&quot;features&quot;&gt; &lt;li class=&quot;hero-card-custom-item&quot;&gt; &lt;p&gt;角色id：&lt;span&gt;{{id}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;角色属性：&lt;span&gt;{{features}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;角色名字：&lt;span&gt;{{name}}&lt;/span&gt;&lt;/p&gt; &lt;/li&gt; &lt;/ng-template&gt; `, styles:[ //在这里写自定义模板的样式 `.hero-card-custom-item{ width: 100%; height: 35px; border: 1px solid #999999; border-radius: 5px; display: flex; justify-content:space-around; align-items: center; margin: 10px 0; } .hero-card-custom-item p { width: 30%; margin: 0; font-size: 20px; color: #666666; } .hero-card-custom-item p span { color: red; }` ] }) export class TemplateOutletAppDemoComponent {}</pre><div class="contentsignin">ログイン後にコピー</div></div>そしてそれを実行すると、効果は以下のようになります (実際にはまだ非常に醜いです): </p> <p></p> <p></p>##概要<p><img src="https://img.php.cn/upload/image/407/137/698/163460938474623Angular%20%E3%81%A7%E3%81%AE%20NgTemplateOutlet%20%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E7%90%86%E8%A7%A3%E3%81%A8%E4%BD%BF%E7%94%A8%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A9%B1%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86" title="163460938474623Angular での NgTemplateOutlet ディレクティブの理解と使用法について話しましょう" alt="Angular での NgTemplateOutlet ディレクティブの理解と使用法について話しましょう"></p>使用<h3 data-id="heading-3">NgTemplateOutlet<strong>この構造ディレクティブは、サブコンポーネントのカプセル化を強化し、親コンポーネントのテンプレートが肥大化して見える多数の入力属性を定義する必要性を回避します。 </strong> </h3>プログラミング関連の知識について詳しくは、<p>プログラミング入門<code>をご覧ください。 ！

以上がAngular での NgTemplateOutlet ディレクティブの理解と使用法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。