有什么方法可以在 Angular 的 HTML 模板中提供的类中拥有私有属性吗？

Question

我正在制作一些自定义组件，这些组件将在我的项目的不同部分（可能不止一个项目）中使用，并且我希望有一些属性可以在这些组件的 HTML 模板中呈现，但也不能作为 < code>public 对于可能包含该组件的其他组件。

例如：

我的通用组件

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
})
export class MyComponent implements OnInit {
    title:string='TITLE'; // public because otherwise the template can't use it
}

在其模板中包含 MyComponent 的其他组件

@Component({
    selector: 'other-component',
    templateUrl: './other-component.component.html',
    styleUrls: ['./other-component.component.scss'],
})
export class OtherComponent implements OnInit {
    @ViewChild(MyComponent) my:MyComponent;
    ...
    fun(){
        this.my.title = "other title"; // this is what I don't want to happen
    }
    ...
}

有没有办法避免 OtherComponent 能够使用 MyComponent.title ？

Answer 1

无法将 Angular 组件上的私有属性公开给组件的 HTML 模板。

您可以通过提供 get 方法而不是 set 方法将该属性公开为只读属性：

private _title:string='TITLE'; 
get title(): {
   return this._title;
}

在第二个组件中，此方法应该抛出错误，因为 title 是只读属性：

this.my.title = "other title"; 

您应该能够如果需要，可以访问该值，如下所示：

console.log(this.my.title);

但是，将不可设置。

这里需要注意的是，如果您不使用文字，而是使用数组或对象，则即使不设置主属性，也可以修改对象属性。

private _myObject = {}; 
get myObject(): {
   return this._myObject;
}

那么这样就可以正常工作了：

this.my.myObject.title = "other title";