Angular での @ViewChild の使用法に関する簡単な説明

この記事では、Angular の @ViewChild を理​​解し、@ViewChild の使用方法を紹介します。

簡単に言えば、@ViewChild についての私の個人的な理解は、これは参照であり、この参照を通じてこのコンポーネントまたは要素を取得できるということです。そして、このコンポーネントの取得した値とメソッドを使用できます。 [関連チュートリアルの推奨事項: "

angular チュートリアル

"]これが何をするのかをより直観的に知るには、コードに直接アクセスしてください。

サブコンポーネントを取得します。 @ViewChild 、子コンポーネントの値を取得し、子コンポーネントのメソッドを呼び出します

子コンポーネント child

content:'Zita';
changeChildCon() {
	this.content = 'Zita1111'
}

親コンポーネントparent

html
<app-child></app-child>

ts
import { ViewChild } from '@angular/core';
@ViewChild('ChildrenView', { static: true }) childrenView: any;  //ChildrenView为子组件中的#后边的值，childrenView是个名称用来指代子组件
this.childrenView.content   // Zita  获取子组件中的值
this.childrenView.changeChildCon()  // 执行子组件中的方法
this.childrenView.content   // Zita1111

@ViewChild 要素を通じて特定の値を取得します。

html

<figure>
  我是父元素中的一个标签figure，我可以通过viewchild来获取，并且获取到我之后可以改变我的样式
</figure>

ts

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('parBele', { static: true }) eleRef: ElementRef;
this.eleRef.nativeElement.style.color = 'red';  // 更改获取的dom元素的样式

次に、このコードを通じて、ページ上のフォントの色が表示されます。 Figure タグは赤色になります。

特別な注意事項

angular8.0 の後に

{ static: を必ず追加してください。 true } 属性、さらに、この属性の公式説明は次のとおりです:

メタデータ属性:

セレクター - クエリに使用される命令のタイプまたは名前。

read - クエリされた要素から別のトークンを読み取ります。

static - 変更検出を実行する前にクエリ結果を解決する場合は true、変更検出後に解決する場合は false です。デフォルトは false です。


静的の場合、それは次のことを意味します: true の場合、変更検出が実行中である クエリ結果false の場合、変更検出の前または後に解析されます。デフォルトは false です。

これをどのように理解できますか?

主に、「変更検出」のアクションが発生するノードにあります。

たとえば、ngIf 命令と ngShow 命令をよく使用しますが、これらの命令がサブコンポーネントに追加され、同時に static が true の場合です。そして、参照対象をキャプチャすると、得られる値は未定義になります。

この時点で、実際のプロジェクトでよく使われる @ViewChild についての理解は終わりました...共有させてください

プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上がAngular での @ViewChild の使用法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。