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

템플릿의 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 요소 인 경우 요소
• the component or directive instance if it is an element with a component or directive
• some specific component or directive if it's used like #foo="bar" when bar is

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

Such a template variable can be referenced in template bindings or in element queries like

@ViewChild('searchBox') searchBox:HTMLInputElement;

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