Anglarの中のng-templateおよびangglarがngTemplateOutletコマンドを使用する方法
ng-templateはテンプレートを定義するために使用されます。ng-templateを使用して一つのテンプレートを定義した後、ng-containerとtemplateOutletコマンドで使用できます。
次にanglarを見て、ngTemplateOutletコマンドを使います。
ngTemplateOutletの役割
このコマンドは、既存のTemplateRefオブジェクトに基づいて、対応する埋め込みビューを挿入するために使用されます。NgTemplateOutletコマンドを適用すると、EmbodViewRefのコンテキストオブジェクトを設定することができます。バインディングされたコンテキストはオブジェクトであり、さらに、バインディングされたコンテキストオブジェクトの属性名をlet文法で宣言することができます。
ngTemplateOutletの使用
以上は小编で绍介したAnglarの中のng-templateとangglarがngTemplateOutletコマンドを使う方法です。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
<ng-template #loading>
<button (click)="login()">login</button>
<button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">
</ng-container>
ng-templateは、カスタマイズ性の高いコンポーネントを作成する際に非常に有用です。カスタマイズが必要な内容をテンプレートとしてコンポーネントに伝えることができます。次にanglarを見て、ngTemplateOutletコマンドを使います。
ngTemplateOutletの役割
このコマンドは、既存のTemplateRefオブジェクトに基づいて、対応する埋め込みビューを挿入するために使用されます。NgTemplateOutletコマンドを適用すると、EmbodViewRefのコンテキストオブジェクトを設定することができます。バインディングされたコンテキストはオブジェクトであり、さらに、バインディングされたコンテキストオブジェクトの属性名をlet文法で宣言することができます。
ngTemplateOutletの使用
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ng-template #stpl>
Hello, Semlinker!
</ng-template>
<ng-template #atpl>
Hello, Angular!
</ng-template>
<div [ngTemplateOutlet]="atpl"></div>
<div [ngTemplateOutlet]="stpl"></div>
`,
})
export class AppComponent { }
ngOutlet Contextの使用
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ng-template #stpl let-message="message">
<p>{{message}}</p>
</ng-template>
<ng-template #atpl let-msg="message">
<p>{{msg}}</p>
</ng-template>
<ng-template #otpl let-msg>
<p>{{msg}}</p>
</ng-template>
<div [ngTemplateOutlet]="atpl"
[ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="stpl"
[ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="otpl"
[ngOutletContext]="context"> </div>
`,
})
export class AppComponent {
context = { message: 'Hello ngOutletContext!',
$implicit: 'Hello, Semlinker!' };
}
締め括りをつける以上は小编で绍介したAnglarの中のng-templateとangglarがngTemplateOutletコマンドを使う方法です。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。