Angular でのコンテンツ投影の方法について話しましょう

この記事では、angular でのコンテンツ投影について説明し、コンテンツ投影に ng-content を使用する方法を紹介し、条件付きコンテンツ投影の実装方法を理解します。 ！

1. ng-content コンテンツ投影

1.1 <span style="font-size: 16px;">ng-content</span>

ng-content 要素は、外部または動的コンテンツ シンボルを挿入するために使用される プレースホルダーです## ＃。親コンポーネントは、外部コンテンツを子コンポーネントに渡します。Angularがテンプレートを解析すると、外部コンテンツは子コンポーネントのテンプレートに挿入されます。と表示されます。 [関連チュートリアルの推奨事項: "angular チュートリアル"] コンテンツ プロジェクションを使用して、再利用可能なコンポーネントを作成できます。これらのコンポーネントは同様のロジックとレイアウトを備えており、多くの場所で使用できます。一般に、いくつかのパブリック コンポーネントを カプセル化する場合によく使用されます。

1.2 コンテンツ プロジェクションを使用する理由

ボタン コンポーネントを定義します:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span>
`
})
export class AppButtonComponent {}

このボタン コンポーネントの目的は、ボタン内に検索アイコンを追加することです。実際には次のように使用します: <pre class="brush:js;toolbar:false;">&lt;button appButton&gt;click&lt;/button&gt;</pre>コンポーネントは検索アイコンのみを表示することがわかりました。ボタンのテキストは表示されません。最も一般的に使用される

@Input

デコレータを思い浮かべるかもしれませんが、テキストだけでなく ## の段落を渡したい場合はどうなるでしょうか。 #html

?現時点では

ng-content が使用されます。 1.3 シングル スロット コンテンツ プロジェクション

コンテンツ プロジェクションの最も基本的な形式は、シングル スロット コンテンツ プロジェクションです。

単一スロット コンテンツの投影とは、コンポーネントを投影できるコンポーネントを作成することを指します。

ボタン コンポーネントを例として、単一スロット コンテンツ プロジェクションを作成します。

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content></ng-content>
`
})
export class AppButtonComponent {}

実際の使用法は次のとおりです。

<pre class="brush:js;toolbar:false;">&lt;button appButton&gt;click&lt;/button&gt;</pre> このボタン コンポーネントの効果は、検索アイコンとボタン (クリック) のテキストの両方を表示することであることがわかります。つまり、2b4ad80bee79097601321f1e5d22b32765281c5ac262bf6d81768915a4a77ac0

の中央にあるコンテンツ

は、

d553bd28b5bbbbd4b6fb4990edbabbf088ec7917cec188d588461acf6dbbe944 标签消失了，并没有起任何作用

<div>
  <p>My name is wyl.</p>
  <p>What is you name?</p>
</div>

• 使用场景，如下，在我们需要遍历或 if 判断 时，它可以承担一个载体的作用

<ul>
  <ng-container *ngFor="let item of items">
    <li>{{ item .name}}</li>
    <li>{{ item .age}}</li>
    <li>{{ item .sex}}</li>
  </ng-container>
</ul>

另外，ng 中常见错误之一的 for 和 if 不能写在同一标签上（在一个宿主元素上只能应用一个结构型指令），利用 ng-container 标签可以在实现功能的基础上减少层级的嵌套。

2.2 <span style="font-size: 16px;">ng-template</span>

先来看下面一段代码

<ng-template>
    <p> In template, no attributes. </p>
</ng-template>

<ng-container>
    <p> In ng-container, no attributes. </p>
</ng-container>

浏览器输出结果是：

In ng-container, no attributes.

即 6efee24582b35a5bc3ecd0628f23f6da 中的内容不会显示。当在上面的模板中添加 ngIf 指令：

<ng-template [ngIf]="true">
   <p> ngIf with a ng-template.</p>
</ng-template>

<ng-container *ngIf="true">
   <p> ngIf with an ng-container.</p>
</ng-container>

浏览器输出结果是：

ngIf with a ng-template.
ngIf with an ng-container.

2.3 <span style="font-size: 16px;">ng-template</span> 和 <span style="font-size: 16px;">d4a8107efa96305af677e1edd4999c73</span> 的配合使用

<ng-container *ngIf="showSearchBread; else tplSearchEmpty">
     暂时搜索不到您要的数据喔
</ng-container>
<ng-template #tplSearchEmpty>
     快快开始获取吧！
</ng-template>

2.4 <span style="font-size: 16px;">ngTemplateOutlet</span>

插入 ng-template 创建的内嵌视图。 ngTemplateOutlet 是一个结构型指令，接收一个 TemplateRef 类型的值；

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

*ngTemplateOutlet = "templateRefExp; content: contentExp "

• templateRefExp: ng-template 元素的 #ID
• contextExp:

  • 可空参数

  • content 是一个对象，这个对象可以包含一个 $implicit 的 key 作为默认值， 使用时在 模板 中用 let-key 语句进行绑定

  • content 的非默认字段需要使用 let-templateKey=contentKey 语句进行绑定

使用如下：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
  myContext = {$implicit: &#39;World&#39;, localSk: &#39;Svet&#39;};
}

2.5 利用 <span style="font-size: 16px;">ngTemplateOutlet</span> 进行内容投影

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		  	<ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, index: otherDate }"></ng-container>
		  </div>
		</div>
`
})
export class AppCardComponent {

	@ContentChild(&#39;header&#39;, { static: true }) headerTemplate: TemplateRef<any>;

	public title = &#39;Test&#39;;
	public otherDate = {
	 	auth: &#39;me&#39;,
	 	name: &#39;appCard&#39;
	};
}

使用

<app-card>
  <ng-template #header let-label let-item="otherDate">
    <h1>Angular</h1> {{label}} (Test) and  {{otherDate | json}} ({auth: &#39;me&#39;, name: &#39;appCard&#39;})
  </ng-template>
</app-card>

更多编程相关知识，请访问：编程教学！！

以上がAngular でのコンテンツ投影の方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。