Angular2 - các biến riêng tư có thể truy cập được trong mẫu không?

Nếu một biến được khai báo privatetrên một lớp thành phần, tôi có thể truy cập nó trong khuôn mẫu của thành phần đó không?

@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
}

Không, bạn không nên sử dụng các biến riêng tư trong các mẫu của mình.

Mặc dù tôi thích câu trả lời của drewmoore và thấy logic khái niệm hoàn hảo trong đó, nhưng thực tế nó đã sai. Các mẫu không tồn tại trong các lớp thành phần, nhưng bên ngoài chúng. Hãy xem repo này cho bằng chứng.

Lý do duy nhất khiến nó hoạt động là vì privatetừ khóa của TypeScript không thực sự khiến thành viên riêng tư. Quá trình biên dịch đúng lúc xảy ra trong một trình duyệt trong thời gian chạy và JS không có bất kỳ khái niệm nào về các thành viên riêng tư (chưa?). Tín dụng đến Sander Elias vì đã đưa tôi đi đúng hướng.

Với quá ngctrình biên dịch trước và trước, bạn sẽ gặp lỗi nếu bạn thử truy cập các thành viên riêng của thành phần từ mẫu. Sao chép bản trình diễn repo, thay đổi MyComponentmức độ hiển thị của thành viên thành riêng tư và bạn sẽ gặp lỗi biên dịch khi chạy ngc. Đây cũng là câu trả lời cụ thể cho việc biên soạn trước thời gian.

Chỉnh sửa: Câu trả lời này bây giờ không chính xác. Không có hướng dẫn chính thức nào về chủ đề khi tôi đăng nó, nhưng như đã giải thích trong câu trả lời (xuất sắc và chính xác) của @ Yaroslov, đây không còn là trường hợp nữa: Codelizer hiện cảnh báo và trình biên dịch AoT sẽ thất bại trong các tham chiếu đến các biến riêng tư trong các mẫu thành phần . Điều đó nói rằng, ở mức độ khái niệm, mọi thứ ở đây vẫn còn hiệu lực, vì vậy tôi sẽ để lại câu trả lời này vì nó có vẻ hữu ích.

Vâng, điều này được mong đợi.

Hãy nhớ rằng privatevà các công cụ sửa đổi truy cập khác là các cấu trúc Bản mô tả, trong khi Thành phần / bộ điều khiển / mẫu là các cấu trúc góc mà Bản mô tả không biết gì về. Bộ điều chỉnh truy cập kiểm soát mức độ hiển thị giữa các lớp: Tạo một trường privatengăn các lớp khác có quyền truy cập vào nó, nhưng các mẫu và bộ điều khiển là những thứ tồn tại trong các lớp.

Điều đó không đúng về mặt kỹ thuật, nhưng (thay vì hiểu cách các lớp liên quan đến trang trí và siêu dữ liệu của họ), có thể hữu ích khi nghĩ về nó theo cách này, bởi vì điều quan trọng (IMHO) là chuyển từ suy nghĩ về khuôn mẫu và bộ điều khiển như tách biệt các thực thể nghĩ về chúng như là các phần thống nhất của cấu trúc Thành phần - đây là một trong những khía cạnh chính của mô hình tinh thần ng2.

Nghĩ về nó theo cách đó, rõ ràng chúng ta mong đợi privatecác biến trên một lớp thành phần sẽ hiển thị trong khuôn mẫu của nó, với cùng lý do chúng ta mong đợi chúng sẽ hiển thị trong các privatephương thức trên lớp đó.

Mặc dù ví dụ mã cho biết câu hỏi là về TypeScript nhưng nó không có bản thảonhãn. Angular2 cũng có sẵn cho Dart và đây là một sự khác biệt đáng chú ý với Dart.

Trong Dart , mẫu không thể tham chiếu các biến riêng tư của lớp thành phần, bởi vì Dart trái ngược với TypeScript ngăn chặn hiệu quả sự truy cập của các thành viên riêng từ bên ngoài.

Tôi vẫn quay lại đề xuất @drewmoores để suy nghĩ về thành phần và mẫu của nó là một đơn vị mặc dù.

Cập nhật (TS) Dường như việc truy cập biên dịch ngoại tuyến vào các thuộc tính riêng tư sẽ bị hạn chế hơn trong Angular2 TS cũng như https://github.com/angular/angular/issues/11422

Các biến riêng tư có thể được sử dụng trong khuôn mẫu của thành phần. Xem hướng dẫn sử dụng angular2 để biết hướng dẫn: https://angular.io/docs/ts/latest/cookbook/component-c truyền thông.html #! #Parent-to-child-setter

Một lời giải thích chi tiết hơn về các thành viên công cộng / tư nhân của các lớp trong bản thảo có thể được tìm thấy ở đây: https://www.typescriptlang.org/docs/handbook/groupes.html .

Tất cả các thành viên theo mặc định là công khai. Các thành viên công cộng có thể được truy cập từ bên ngoài lớp thành phần cùng với thể hiện của lớp. Nhưng các thành viên riêng tư chỉ có thể được truy cập trong các hàm thành viên của lớp.

Một cách giải quyết có thể là sử dụng các biến riêng tư trong tệp ts và sử dụng getters.

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

Đây là một cách tiếp cận tốt vì tệp ts và html vẫn độc lập. Ngay cả khi bạn thay đổi tên biến _userName trong tệp ts, bạn không phải thực hiện bất kỳ thay đổi nào trong tệp mẫu.

Câu trả lời ngắn gọn là không nên bạn không thể truy cập các thành viên riêng tư từ mẫu vì nó được tách biệt về mặt kỹ thuật với tệp TS.

Trong tsconfig.app.json nếu bạn cung cấp tùy chọn 'fullTemplateTypeCheck' trong các tùy chọn trình biên dịch, bạn có thể thấy tất cả các tham chiếu không hợp lệ trong các tệp html của dự án của bạn tại thời điểm xây dựng dự án.

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

}