Angular2 - ตัวแปรส่วนตัวควรสามารถเข้าถึงได้ในแม่แบบหรือไม่

หากมีการประกาศตัวแปร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และดูตรรกะทางความคิดที่สมบูรณ์แบบในการใช้งานมันผิด เทมเพลตไม่มีอยู่ในคลาสคอมโพเนนต์ แต่อยู่นอกคลาสเหล่านั้น ลองดูที่repo นี้เพื่อหาข้อพิสูจน์

เหตุผลเดียวที่ทำให้มันเป็นเพราะprivateคำหลักของ TypeScript ไม่ได้ทำให้สมาชิกเป็นส่วนตัว การรวบรวมแบบทันเวลาเกิดขึ้นในเบราว์เซอร์ที่รันไทม์และ JS ไม่มีแนวคิดของสมาชิกส่วนตัว (ยัง?) เครดิตไปที่Sander Eliasเพื่อให้ฉันไปถูกทาง

ด้วยการngcรวบรวมและนำหน้าเวลาคุณจะได้รับข้อผิดพลาดถ้าคุณพยายามเข้าถึงสมาชิกส่วนตัวของส่วนประกอบจากเทมเพลต repo สาธิตโคลนเปลี่ยนแปลงการมองเห็นของสมาชิกข้อผิดพลาดของสะสมส่วนตัวและคุณจะได้รับเมื่อทำงานMyComponent ngcต่อไปนี้เป็นคำตอบเฉพาะสำหรับการรวบรวมล่วงหน้า

แก้ไข: คำตอบนี้ไม่ถูกต้องในขณะนี้ ไม่มีคำแนะนำอย่างเป็นทางการในหัวข้อเมื่อฉันโพสต์ แต่ตามที่อธิบายไว้ใน @ Yaroslov's (ยอดเยี่ยมและถูกต้อง) คำตอบนี่ไม่ใช่กรณี: Codelizer ตอนนี้เตือนและรวบรวม AoT จะล้มเหลวในการอ้างอิงตัวแปรส่วนตัวในแม่แบบองค์ประกอบ . ที่กล่าวว่าในระดับแนวคิดทุกอย่างที่นี่ยังคงใช้ได้ดังนั้นฉันจะทิ้งคำตอบนี้ไว้เพราะดูเหมือนว่าจะเป็นประโยชน์

ใช่คาดว่าจะเป็นเช่นนี้

โปรดทราบว่าprivateและตัวดัดแปลงการเข้าถึงอื่น ๆ คือโครงสร้างแบบ typescript ในขณะที่ส่วนประกอบ / ตัวควบคุม / แม่แบบเป็นโครงสร้างเชิงมุมที่ typescript ไม่ทราบอะไรเลย ตัวดัดแปลงการเข้าถึงควบคุมการเปิดเผยระหว่างคลาส: การสร้างเขตข้อมูลprivateป้องกันคลาสอื่นไม่ให้เข้าถึง แต่แม่แบบและตัวควบคุมเป็นสิ่งที่มีอยู่ภายในคลาส

นั่นไม่ใช่ความจริงทางเทคนิค แต่ (แทนความเข้าใจว่าคลาสเกี่ยวข้องกับนักตกแต่งและข้อมูลเมตาของพวกเขา) มันอาจจะเป็นประโยชน์ในการคิดแบบนี้เพราะสิ่งที่สำคัญ (IMHO) คือการเปลี่ยนจากการคิดเกี่ยวกับแม่แบบและตัวควบคุมแยกต่างหาก เอนทิตีในการคิดของพวกเขาเป็นส่วนหนึ่งของการสร้างส่วนประกอบ - นี่คือหนึ่งในแง่มุมที่สำคัญของรูปแบบจิต ng2

เมื่อคิดอย่างนั้นเราก็คาดหวังว่าprivateตัวแปรในคลาสคอมโพเนนต์จะปรากฏในเทมเพลตด้วยเหตุผลเดียวกับที่เราคาดว่าจะสามารถมองเห็นได้ในprivateวิธีการในคลาสนั้น

แม้ว่าตัวอย่างรหัสระบุว่าคำถามเกี่ยวกับ TypeScript แต่ก็ไม่มี สิ่งที่พิมพ์ด้วยพิมพ์ดีดแท็ก Angular2 ยังมีให้สำหรับ Dart และนี่คือความแตกต่างที่น่าทึ่งของ Dart

ในโผแม่แบบไม่สามารถอ้างอิงตัวแปรส่วนตัวของชนชั้นองค์ประกอบเพราะโผในทางตรงกันข้ามกับ typescript ได้อย่างมีประสิทธิภาพป้องกันการเข้าถึงของสมาชิกในภาคเอกชนจากภายนอก

ฉันยังคงสนับสนุน @drewmoores ข้อเสนอแนะที่จะคิดเกี่ยวกับองค์ประกอบและมันเป็นแม่แบบเป็นหนึ่งหน่วยแม้ว่า

อัปเดต (TS) ดูเหมือนว่าการเข้าถึงการรวบรวมแบบออฟไลน์กับคุณสมบัติส่วนตัวจะมีข้อ จำกัด มากขึ้นใน Angular2 TS เช่นกันhttps://github.com/angular/angular/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 และใช้ getters

private _userName = "Test Name";
get userName() {
  return this._userName;
}

นี่เป็นวิธีการที่ดีเพราะไฟล์ ts และ html ยังคงเป็นอิสระ แม้ว่าคุณจะเปลี่ยนชื่อตัวแปร _userName ในไฟล์ ts คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใด ๆ ในไฟล์เทมเพลต

คำตอบสั้น ๆ คือไม่คุณไม่ควรเข้าถึงสมาชิกส่วนตัวจากเทมเพลตเพราะจะแยกทางเทคนิคจากไฟล์ TS

ใน tsconfig.app.json หากคุณระบุตัวเลือก 'fullTemplateTypeCheck' ในตัวเลือกคอมไพเลอร์คุณสามารถดูการอ้างอิงที่ไม่ถูกต้องทั้งหมดในไฟล์ html ของโครงการของคุณในเวลาที่สร้างโครงการ

"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true

}