有沒有辦法限制對組件及其模板的方法/變量訪問？

Question

當我使用@ViewChild訪問子組件時，我可以訪問它的所有公共方法。 但是，其中一些方法是專門為模板交互編寫的，不應該為另一個（父）組件訪問。 您需要將變量/方法設置為public才能使模板能夠使用它們，但這樣做也會破壞封裝。

有沒有人知道一種方法來限制只對組件的變量/方法訪問，它的模板和它的測試？ 例如，像Java中的package-private修飾符？

在下面的代碼中，父組件能夠通過@ViewChild（TestComponent）訪問組件，然后調用testComponent.showMessage$.next('something totally unrelated') 。 如何定義這是我不想公開的功能？

@Component({
  selector: 'app-aanvraag',
  template: `
    <div *ngIf="showMessage$ | async as message">
      {{message}}
    </div>`,
  styleUrls: ['./aanvraag.component.scss']
})
export class TestComponent {
  showMessage$ = new BehaviorSubject('Some message');

  constructor() {
  }
}

Answer 1

在您的具體示例中，您可以使用asObservable() 。 這可以確保組件外部的任何內容都無法調用next() 。 雖然這也會使你不能從模板中調用它。

遺憾的是，沒有辦法讓它只在模板中可用，並且不能用於可能有權訪問該實例的任何其他代碼段。 我記得2年前，當他們在角度編譯器中添加了檢查時，我將我在模板集中使用的所有屬性設置為private 。 將它們全部公開是一項重大工作。

對於更具描述性的代碼，您可以使模板中使用的內容不具有訪問標識符，以及應該添加public屬性的公共API的一部分。 這不會阻止訪問，但會更清楚。

您還可以查看readonly訪問標識符。 這可以防止任何重新分配所述屬性：

@Component({
  selector: 'app-aanvraag',
  template: `
    <div *ngIf="showMessage$ | async as message">
      {{message}}
    </div>`,
  styleUrls: ['./aanvraag.component.scss']
})
export class TestComponent {
  private readonly showMessage = new BehaviorSubject('Some message');

  readonly showMessage$ = this.showMessage.asObservable();

  constructor() {
  }

  newMessage(message: string): void {
    this.showMessage.next(message);
  } 
}

如果您希望組件中的屬性只是對外部（包括模板）具有讀訪問權限，則可以使用getter：

export class TestComponent {
  get message(): string {
    return this._message;
  }

  private message: string = '';
}

_{出於代碼質量的原因，一個小建議，使用英文命名與組件和模板}