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年前，当他们在angular编译器中添加检查时，我将模板中使用的所有属性设置为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 = '';
}

_{出于代码质量的原因，建议不多，请使用英文名称以及组件和模板}

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

1 个答案: