템플릿의 Angular 2 해시태그는 무엇을 의미합니까?

템플릿의 Angular 2 해시태그는 무엇을 의미합니까?

앵글 2를 작업하고 있는데 이런 걸 발견했어요

<input #searchBox (keyup)="search(searchBox.value)"

그리고 그것은 동작한다.

하지만 #search Box의 의미를 잘 모르겠습니다.의사 선생님도 확실한 걸 못 찾았어요

그게 어떻게 작동하는지 누가 설명해 줄 수 있나요?

DOM 요소를 변수로 선언하는 Angular 2 템플릿 시스템에서 사용되는 구문입니다.

여기에서는 컴포넌트에 템플릿 URL을 지정합니다.

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

템플릿은 HTML을 렌더링합니다.템플릿에서는 데이터, 속성 바인딩 및 이벤트 바인딩을 사용할 수 있습니다.이것은, 다음의 구문을 사용해 실현됩니다.

#- 변수 선언

()- 이벤트 바인딩

[]- 재산 구속

[()]- 양방향 속성 바인딩

{{ }}- 보간

*- 구조 지침

그#구문은 템플릿의 DOM 개체를 참조하는 로컬 변수 이름을 선언할 수 있습니다.

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

이 #searchBox를 설정하면 다음과 같이 타이프 스크립트에서 이 입력을 받을 수 있습니다.

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

편집

예를 들어 https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview 를 추가합니다.

angulartraining.com 에서 :

템플릿 참조 변수는 Angular로 많은 멋진 작업을 수행할 수 있는 작은 보석입니다.템플릿의 요소에 대한 참조를 작성하기 위해 단순한 해시태그에 의존하기 때문에 저는 보통 이 기능을 "해시태그 구문"이라고 부릅니다.

<input #phone placeholder="phone number">

위의 구문은 매우 간단합니다.템플릿에서 나중에 사용할 수 있는 입력 요소에 대한 참조가 생성됩니다.이 변수의 범위는 참조가 정의되어 있는HTML 템플릿 전체입니다.

이 참조를 사용하여 입력 값을 얻는 방법은 다음과 같습니다. 예를 들어 다음과 같습니다.

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

전화기는 입력에 대한HTMlement 오브젝트인스턴스를 참조합니다.그 결과, 전화기는 모든 HTMlement의 속성 및 메서드(ID, 이름, 내부)를 가집니다.HTML, 가치 등)

위의 방법은 ngModel 등의 데이터 바인딩을 검증에 그다지 필요하지 않은 단순한 형식으로 사용하지 않는 좋은 방법입니다.

---

컴포넌트에서도 동작합니까?

대답은 그렇습니다 이다!

가장 좋은 점은 실제 컴포넌트 인스턴스인 HelloWorld Component에 대한 참조를 얻을 수 있기 때문에 컴포넌트의 모든 메서드 또는 속성에 액세스할 수 있다는 것입니다(프라이빗 또는 보호로 선언되어 있어도 놀라운 일입니다).

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

참조하는 템플릿 변수를 만듭니다.

• input DOM
• 구성 요소 또는 명령이 있는 요소인 경우 구성 요소 또는 지시 인스턴스
• 하는 경우)#foo="bar" 때bar

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

이러한 템플릿 변수는 템플릿바인딩 또는 다음과 같은 요소 쿼리에서 참조할 수 있습니다.

@ViewChild('searchBox') searchBox:HTMLInputElement;

언급URL : https://stackoverflow.com/questions/42677096/what-does-angular-2-hashtags-in-template-mean