템플릿의 Angular 2 해시 태그 란 무엇입니까?

나는 각도 2로 일하고 있으며 다음과 같은 것을 발견했습니다.

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

작동합니다.

그러나 #searchBox 의 의미를 이해하지 못합니다 . 나는 문서에서 명확한 것을 찾지 못했습니다.

아무도 그것이 어떻게 작동하는지 설명해 줄 수 있습니까?

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를 설정하면 다음과 같이 Typescript에서이 입력을 얻을 수 있습니다

    @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>

참고  전화를  받는 의미  는 HTMLElement의 에 대한 객체 인스턴스  입력 . 결과적으로  휴대 전화  는 HTMLElement (id, name, innerHTML, value 등)의 모든 속성과 메소드를 갖습니다.

위의 방법은 ngModel 또는 다른 종류의 데이터 바인딩을 유효성 검사 측면에서 많이 요구하지 않는 간단한 형태로 사용하지 않는 좋은 방법입니다.

---

이것은 구성 요소에서도 작동합니까?

대답은 '예'입니다.

... 그것의 가장 좋은 부분은 실제 컴포넌트 인스턴스 인 HelloWorldComponent에 대한 참조를 얻고 있다는 것입니다. 그래서 컴포넌트 또는 컴포넌트로 선언 된 경우에도 해당 컴포넌트의 메소드 나 속성에 액세스 할 수 있습니다. :

@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;