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

Question

我正在制作一些自定义组件，这些组件将用于我项目的不同部分（可能不止一个项目），我想在这些组件的 HTML 模板中呈现一些属性组件，但也不能作为 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;
}

在你的第二个组件中，这个方法应该抛出一个错误，因为标题是只读的属性:

this.my.title = "other title";

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

console.log(this.my.title);

但是，将无法设置。

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

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

那么这样就可以了：

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

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

Is there any way to have a private property in a class that is available in the HTML template in Angular?

web-component

angular-components

angular

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

Is there any way to have a private property in a class that is available in the HTML template in Angular?

web-component

angular-components

angular

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