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

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 = '';
}

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