속성 'X'는 비공개이며 'xyzComponent'클래스 내에서만 액세스 할 수 있습니다.

이 블로그 를 팔로우하고있는 프로덕션 용 angular2 애플리케이션을 구축하려고합니다 . 내 ngc 성공적인 컴파일 후 tsc 컴파일 이 수행되면 이미지에 표시된 오류가 생성됩니다.

잠시 검색 한 후 "컨텍스트 속성" 섹션 에서 문제를 설명하는 이 블로그 를 발견했습니다.이 블로그 는 제대로 이해할 수없는 문제가 발생하고 있다는 좋은 생각을 줄 수 있습니다. 기본적으로 변수를 private으로 만들 때 "ERROR : Property is private and only access within class"라는 메시지가 표시 됩니다. 나는 그것이 왜 오는지 이해하지 못한다.

지난 며칠 동안이 문제에 머리를 두드리는 동안 친절하게 도와주세요.

주어진 구성 요소의 경우 템플릿에서 액세스하는 모든 구성원 (메서드, 속성)은 AOT 컴파일 시나리오에서 공용이어야합니다. 이는 템플릿이 TS 클래스로 바뀌었기 때문입니다. 생성 된 클래스와 구성 요소는 이제 두 개의 개별 클래스이며 클래스 간 개인 멤버에 액세스 할 수 없습니다.

간단히 말해서 미리 컴파일을 사용하려는 경우 템플릿의 비공개 멤버에 액세스 할 수 없습니다.

더 나은 설명을 위해 https://github.com/angular/angular/issues/11422

더 간단한 또 ​​다른 대답은 다음과 같습니다.

여러분, HTML에서 개인 메서드, 필드 또는 속성을 호출하지 마십시오. :)

PS는 컴파일 할 때 *.ts코드를 *.js, AOT의 와 비공개 회원을 연결하는 쓰레기 HTML의 템플릿입니다.

그리고 "예"이렇게하면 빌드 파이프 라인이 실패합니다. D

생성자에서 개인 주사 가능을 선언했을 때 이것을 얻었습니다.

constructor(private service: SpecificObjectService) { }

그리고 템플릿에서 사용했습니다.

*ngFor="let pd of service.listSpecificObject "

해결책은 다음과 같습니다.

constructor(public service: SpecificObjectService) { }

그래서이 문제를 해결했습니다. 짧고 간단하게 유지하겠습니다. 이 문제를 해결하기 위해이 블로그를 깊이 읽었습니다 . " 컨텍스트 속성 " 섹션에서와 같이이 문제에 대한 해결책은 AOT ( 예 : Ahead Of Time )를 사용 하여 빌드를 만들 때 뷰에서 직접 사용하려는 경우 개인 변수를 사용하거나 생성하지 않는 것 입니다. 생산.

* 예제 *

// component.ts
@Component({
  selector: 'third-party',
  template: `
    {{ _initials }}
  `
})
class ThirdPartyComponent {
  private _initials: string;
  private _name: string;

  @Input()
  set name(name: string) {
    if (name) {
      this._initials = name.split(' ').map(n => n[0]).join('. ') + '.';
      this._name = name;
    }
  }
}

출력 : 속성 '_initials'는 비공개이며 'ThirdPartyComponent'클래스 내에서만 액세스 할 수 있습니다.

해결책:

이것을 private _initials: string;간단히 업데이트하십시오._initials: string;

이 답변에 대해 Harish Gadiya 는 저에게 도움을 제공하므로 고맙습니다.

이것은 나를 위해 작동합니다. 단순히 서비스를 공개로 변경하십시오.

constructor(public service: SpecificObjectService) { }

생산중인 앱 !!

좋아요, 이것은 정말 간단한 자바 스크립트 es6 문제입니다. 데이터 유형을 비공개로 유지해야한다면 간단히 이렇게 할 수 있습니다.

privateAccess(){
     return this.cannotAccessByInstanceButStillNeeded
}

보기에서 라우터를 사용하려면 공개로 설정하십시오.

예 :

<button 
   [routerLink]="['/login']"
   [queryParams]="{redirectTo: router.url}"
   translate="Please sign in to use this feature"
/>

import { Router } from '@angular/router'; 

constructor(
   public router: Router; // don't make it private
) {}

Github CI가 경고 메일을 보낼 때까지 간과했습니다.