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

Question

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

有谁知道一种方法可以将变量/方法访问限制为仅组件，模板和测试？例如，像 Java 中的包私有修饰符？

在下面的代码中，父组件能够通过 @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。将它们全部公开是一项艰巨的工作。

对于更具描述性的代码，可以使模板中使用的内容没有访问标识符，并且应该成为公共 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 = '';
}

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