private컴포넌트 클래스에서 변수가 선언 된 경우 해당 컴포넌트의 템플리트에서 변수 에 액세스 할 수 있어야합니까?
@Component({
selector: 'my-app',
template: `
<div>
<h2>{{title}}</h2>
<h2>Hello {{userName}}</h2> // I am getting this name
</div>
`,
})
export class App {
public title = 'Angular 2';
private userName = "Test Name"; //declared as private
}답변:
아니요, 템플릿에서 개인 변수를 사용해서는 안됩니다.
drewmoore의 답변을 좋아하고 그 안에 완벽한 개념적 논리가 있지만 구현 측면에서는 잘못되었습니다. 템플리트는 컴포넌트 클래스 내에 존재하지 않지만 템플리트 외부에 존재합니다. 증명 을 위해이 레포 를 살펴보십시오 .
이것이 작동하는 유일한 이유는 TypeScript의 private키워드가 실제로 멤버를 비공개로 만들지 않기 때문 입니다. JIT (Just-In-Time) 컴파일은 런타임시 브라우저에서 발생하며 JS에는 비공개 멤버 개념이 없습니다 (아직?). 크레딧이 Sander Elias에게로 갑니다 .
으로 ngc당신이 템플릿에서 구성 요소의 전용 멤버를 액세스하려고 경우 앞서-의 타임 컴파일, 당신은 오류를 얻을 수 있습니다. 데모 저장소를 복제하고 MyComponent멤버의 가시성을 비공개로 변경 하면 실행할 때 컴파일 오류가 발생합니다 ngc. 다음은 Ahead-of-Time 컴파일 전용 답변 입니다.
편집 :이 답변은 이제 잘못되었습니다. 내가 올릴 때 주제에 대한 공식적인 지침은 없었지만 @Yaroslov의 (우수하고 정확한) 답변에서 설명했듯이 더 이상 그렇지 않습니다 .Codelizer가 경고하고 구성 요소 템플릿의 개인 변수에 대한 참조에서 AoT 컴파일이 실패합니다 . 즉, 개념적 수준에서는 여기의 모든 것이 유효하게 유지되므로 도움이 된 것처럼이 답변을 남겨 두겠습니다.
그렇습니다.
있다는 사실을 숙지 private구성 요소 / 컨트롤러 / 템플릿 타이프 라이터가 모르는 각 구조 인 반면 다른 액세스 수식, 타이프 라이터 구조이며. 액세스 수정 가시성 제어 사이의 필드 만들기 : 클래스를 private방지 다른 클래스 에 대한 액세스 권한을 필요로하지만, 템플릿 및 컨트롤러가 존재하는 것들 내에서 클래스.
그것은 기술적으로 사실이 아니지만 (클래스가 데코레이터 및 메타 데이터와 관련되는 방법을 이해하는 대신)이 방법으로 생각하면 도움이 될 수 있습니다 .IMHO (중요한 것)는 템플릿과 컨트롤러에 대한 생각에서 분리 된 것으로 이동하기 때문입니다. 엔티티를 컴포넌트 구성의 통합 된 부분으로 생각합니다. 이것은 ng2 정신 모델의 주요 측면 중 하나입니다.
그런 식으로 생각 private하면 컴포넌트 클래스의 변수가 템플릿에 표시 될 것으로 예상됩니다. 같은 이유로 private해당 클래스 의 메소드에 변수가 표시 될 것으로 예상됩니다 .
코드 예제에서 TypeScript에 대한 질문이 있음에도 불구하고 타이프 스크립트꼬리표. Dart에서도 Angular2를 사용할 수 있으며 이는 Dart와의 현저한 차이점입니다.
에서는 다트 템플릿 전용 변수 참조 할 수 다트 타이프 달리 효과적으로 외부 전용 부재 액세스를 방지하기 때문에, 컴포넌트 클래스의이.
나는 여전히 컴포넌트에 대해 생각하기 위해 @drewmoores 제안을 뒷받침하지만 템플릿은 하나의 단위로 사용됩니다.
업데이트 (TS) Angular2 TS에서도 개인 속성에 대한 오프라인 컴파일 액세스가 더 제한 될 것으로 보입니다 https://github.com/angular/angular/issues/11422
프라이빗 변수는 컴포넌트 템플릿 내에서 사용할 수 있습니다. 가이드는 angular2 치트 시트를 참조하십시오 : https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter
typescript에서 공개 / 비공개 클래스 멤버에 대한 자세한 설명은 https://www.typescriptlang.org/docs/handbook/classes.html 에서 확인할 수 있습니다 .
기본적으로 모든 회원은 공개입니다. 클래스 멤버와 함께 구성 요소 클래스 외부에서 공개 멤버에 액세스 할 수 있습니다. 그러나 개인 멤버는 클래스 멤버 함수 내에서만 액세스 할 수 있습니다.
해결 방법은 ts 파일에서 개인 변수를 사용하고 getter를 사용하는 것입니다.
private _userName = "Test Name";
get userName() {
return this._userName;
}이것은 ts 파일과 html이 독립적으로 유지되기 때문에 좋은 접근 방법입니다. ts 파일에서 _userName 변수 이름을 변경하더라도 템플릿 파일을 변경할 필요는 없습니다.
private _name = '';
tsconfig.app.json에서 컴파일러 옵션에 'fullTemplateTypeCheck'옵션을 제공하면 프로젝트 빌드시 프로젝트의 html 파일에서 유효하지 않은 모든 참조를 볼 수 있습니다.
"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true}