有没有办法限制对组件及其模板的方法/变量访问? [英] Is there a way to restrict method/variable access to the component and it's template?

问题描述

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

When I access a childcomponent using @ViewChild, I get access to all it's public methods. However, some of those methods are specifically written for template interaction and shouldn't be accessible for another (parent) component. You need to set variables/methods to public in order for your template to be able to use them, but doing so also breaks encapsulation.

有谁知道限制变量/方法只能访问组件、模板和测试的方法?例如像 Java 中的 package-private 修饰符?

Does anyone know of a way to restrict variable/method access to only the component, it's template and it's test? For example like the package-private modifier in Java?

在下面的代码中，父组件能够通过@ViewChild(TestComponent) 访问组件，然后调用testComponent.showMessage$.next('something fully unrelated').我如何定义这是我不想公开的功能?

In the following code, a parent-component is able to access the component via @ViewChild(TestComponent) and then call testComponent.showMessage$.next('something totally unrelated'). How can I define that this is functionality that I don't want to expose?

@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() {
  }
}

推荐答案

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

In your specific example you can use the asObservable(). This makes sure that anything outside the component cannot call next(). Although this will also make it so that you can't call that from the template.

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

Unfortunately there is no way to make it just available in the template, and not available for any other piece of code that might have access to the instance. I remember 2 years ago when they added the check in the angular compiler, I had all my properties which were used in the template set as private. Was a big job to make them all public.

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

For a more descriptive code, you can make the things that are used in the template not have an access identifier, and what should be part of the public API you can add the public property. This will not prevent access, but makes it more clear.

您还可以查看 readonly 访问标识符.这可以防止任何东西重新分配所述属性:

You can also have a look at the readonly access identifier. This prevents anything from reassigning said property:

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

If you want to have a property from a component just to have read access to the outside (including the template), you can use a getter:

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

  private message: string = '';
}

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

这篇关于有没有办法限制对组件及其模板的方法/变量访问?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！