Angular에서 @ViewChild 사용에 대한 간략한 토론

이 글에서는 Angular의 @ViewChild를 소개하고 @ViewChild 사용 방법을 소개합니다.

간단히 말하면

@ViewChild에 대한 개인적인 이해는 다음과 같습니다. 이는 참조이며 이 참조를 통해 이 구성 요소 또는 요소를 얻을 수 있습니다. 그리고 우리는 이 컴포넌트의 획득된 값과 방법을 사용할 수 있습니다. [관련 튜토리얼 추천 : "angular tutorial"]

무슨 일을 하는지 좀 더 직관적으로 알고 싶으시면 코드로 직접 가보세요

@ViewChild를 통해 하위 컴포넌트를 가져오고, 하위 컴포넌트의 값을 가져와 메소드를 호출해 보세요. of the subComponent

Child 컴포넌트 child

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

Parent 컴포넌트 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元素的样式

를 통해 요소를 가져옵니다. 따라서 이 코드를 통해 그림 태그를 볼 수 있습니다. page 의 글꼴 색상이 빨간색으로 변경되었습니다

특별 알림

Angular8.0 이후 속성을 추가하세요{ static: true } 또한 이 속성에 대한 공식 설명은 다음과 같습니다.

메타데이터 속성:
선택기 - 쿼리에 사용되는 명령 유형 또는 이름입니다.
읽기 - 쿼리된 요소에서 다른 토큰을 읽습니다.
정적 - 변경 감지가 실행되기 전에 쿼리 결과를 확인하려면 true이고, 변경 감지 후에 확인하려면 false입니다. 기본값은 false입니다. 기본값은 false입니다.

이해하는 방법은 무엇입니까?

주로 "변경 감지" 작업이 발생하는 노드에 있습니다.

예를 들어, 이러한 지침이 하위 구성 요소에 추가되고 동시에 static이 true인 경우 ngIf 및 ngShow 명령을 자주 사용합니다. 그러면 참조 대상을 캡처하면 얻은 값이 정의되지 않습니다

이 시점에서 실제 프로젝트에서 자주 사용하는 @ViewChild에 대한 이해가 끝났습니다... 함께 공유하겠습니다

더 많은 프로그래밍 관련 지식 , 방문해주세요:

프로그래밍 교육

! !

위 내용은 Angular에서 @ViewChild 사용에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!