有没有办法限制对组件及其模板的方法/变量访问？答案

【问题标题】：Is there a way to restrict method/variable access to the component and it's template?有没有办法限制对组件及其模板的方法/变量访问？
【发布时间】：2020-01-07 02:58:39
【问题描述】：

当我使用@ViewChild 访问子组件时，我可以访问它的所有公共方法。但是，其中一些方法是专门为模板交互而编写的，不应被另一个（父）组件访问。您需要将变量/方法设置为公开，以便您的模板能够使用它们，但这样做也会破坏封装。

有谁知道限制变量/方法仅访问组件、模板和测试的方法？比如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() {
  }
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

在您的具体示例中，您可以使用asObservable()。这确保了组件之外的任何东西都不能调用next()。尽管这也会使您无法从模板中调用它。

不幸的是，没有办法让它只在模板中可用，并且不能用于可能访问该实例的任何其他代码。我记得 2 年前当他们在 Angular 编译器中添加检查时，我将模板中使用的所有属性设置为 private。将它们全部公开是一项艰巨的工作。

对于更具描述性的代码，您可以使模板中使用的东西没有访问标识符，而应该是公共 API 的一部分，您可以添加 public 属性。这不会阻止访问，但会更清楚。

您还可以查看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 = '';
}

出于代码质量原因，一个小建议，对组件和模板使用英文命名

【讨论】：