プロパティ 'X'はプライベートであり、クラス 'xyzComponent'内でのみアクセスできます

私はこのブログをフォローしているため、本番用のangular2アプリケーションを構築しようとしています。ngcのコンパイルが成功した後、tsc コンパイルが行われると、次の画像に示すエラーが生成されます。

しばらく検索したところ、「コンテキストプロパティ」セクションの問題を説明しているこのブログを見つけましたが、正しく理解できなかったため、何がおかしいのかよくわかります。基本的に、変数をプライベートにすると、「エラー：プロパティはプライベートであり、クラス内でのみアクセス可能」になります。なぜそれが来るのか理解できません。

過去数日間この問題に頭を悩ませているので、親切に助けてください。

特定のコンポーネントについて、そのテンプレートによってアクセスされるすべてのメンバー（メソッド、プロパティ）は、AOTコンパイルシナリオでパブリックでなければなりません。これは、テンプレートがTSクラスに変換されるためです。生成されたクラスとコンポーネントは2つの別個のクラスになり、クラス間でプライベートメンバーにアクセスできなくなりました。

つまり、事前コンパイルを使用する場合は、テンプレートのプライベートメンバーにアクセスできません。

より良い説明のためにhttps://github.com/angular/angular/issues/11422

多分さらに簡単な答えは次のとおりです：

皆さん、HTMLからプライベートメソッド、フィールド、またはプロパティを呼び出さないでください:)

PSが*.tsコードをにコンパイルすると*.js、AOTは非公開メンバーをHTMLテンプレートに接続することを拒否します。

そして「はい」これはあなたのビルドパイプラインを失敗させるでしょう：D

だから私はこの問題を修正しました。私はこれを短くて単純なままにします。これを修正するために、私はこのブログを深く読みました。セクション「コンテキストプロパティ」のように、この問題の解決策は、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(private service: SpecificObjectService) { }

そしてそれらをテンプレートで使用しました：

*ngFor="let pd of service.listSpecificObject "

解決策は次のとおりです。

constructor(public service: SpecificObjectService) { }

これは私にとっては機能します。サービスをパブリックに変更するだけです。

constructor(public service: SpecificObjectService) { }

アプリが稼働中！

わかりました。これは本当に単純なjavascript 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から警告メールが届くまで見落としました。