![](/img/trans.png)
[英]Angular 4 : Build to prod: Property is private and only accessible within class
[英]Angular 7 : Build on prod : Property 'service' is private and only accessible within class "Component"
我正在使用 Angular 7。我运行这个 cmd ng build --prod
build 进行保护。
那个时候我缓存了这个错误(属性“服务”是私有的,只能在“登录组件”类中访问):
ERROR in src\\app\\login\\login.component.html(5,33): : Property 'service' is private and only accessible within class 'LoginComponent'. src\\app\\login\\login.component.html(18,104): : Property 'service' is private and only accessible within class 'LoginComponent'.
这是我的HTML 代码:
<div id="login_section" class="d-flex justify-content-center align-items-center"> <div class="login_cnt col-8 row"> <div class="col-6 d-flex justify-content-center py-4"> <form class="col-8" [formGroup]="service.loginform"> <h2 class="text-center">User Login</h2> <mat-form-field class="col-12"> <input matInput type="text" placeholder="Username" formControlName="username" > <mat-error>Username is Required</mat-error> </mat-form-field> <mat-form-field class="col-12"> <input matInput [type]="hide ? 'password' : 'text'" formControlName="password" placeholder="Password"> <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> <mat-error>Password is Required</mat-error> </mat-form-field> <a href="#" class="float-left lnk_forgot h7">Forgot Password</a> <button mat-raised-button color="primary" class="float-right" [routerLink]="['/home']" [disabled]="service.loginform.invalid">Login</button> </form> </div> </div> </div>
这是我的TS 文件:
import { Component, OnInit } from '@angular/core'; import { LoginService } from '../shared/login.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent implements OnInit { username : string; password: string; hide = true; constructor(private service: LoginService) { } ngOnInit() { } }
运行 ng serve 时没有抓住它。
有两种方法可以解决这个问题。
1。
更改private service: LoginService
到public service: LoginService
在编译期间使用AOT时,无法在HTML模板中访问组件的私有属性。
2。
如果要将服务保密,可以在控制器中提供返回服务属性的公共方法。 您可以从HTML模板中调用此方法。 它会是这样的:
模板:
<div id="login_section" class="d-flex justify-content-center align-items-center">
<div class="login_cnt col-8 row">
<div class="col-6 d-flex justify-content-center py-4">
<form class="col-8" [formGroup]="getLoginForm()"> <!-- Change here-->
<h2 class="text-center">User Login</h2>
<mat-form-field class="col-12">
<input matInput type="text" placeholder="Username" formControlName="username" >
<mat-error>Username is Required</mat-error>
</mat-form-field>
<mat-form-field class="col-12">
<input matInput [type]="hide ? 'password' : 'text'" formControlName="password" placeholder="Password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error>Password is Required</mat-error>
</mat-form-field>
<a href="#" class="float-left lnk_forgot h7">Forgot Password</a>
<button mat-raised-button color="primary" class="float-right" [routerLink]="['/home']" [disabled]="getLoginForm().invalid">Login</button> <!-- Change here-->
</form>
</div>
</div>
</div>
控制器:
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../shared/login.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
username : string;
password: string;
hide = true;
constructor(private service: LoginService) { }
ngOnInit() {
}
getLoginForm() {
return this.service.loginform;
}
}
PS:我现在还没有亲自测试过第二个。
您需要使访问说明符公开才能使其可访问
constructor(public service: LoginService) { }
似乎您正在使用Ahead-of-Time编译(构建时),并且您正尝试在其模板[disabled]="service.loginform.invalid"
, service.loginform
访问组件的私有成员( service
) service.loginform
。 但是在模板和ahead-of-time compilation
中使用它必须是公开的:
constructor(private service: LoginService) { }
应该:
// your component: change private service to public service
constructor(public service: LoginService) { }
// then you can use it like this in the template of your component:
[formGroup]="service.loginform"
[disabled]="service.loginform.invalid"
如果您需要私有服务并且仍需要在组件模板中使用其某些成员,请使用get
或其他方法(公共)返回该成员:
// your component
constructor(private service: LoginService) { }
get loginForm() {
return this.service.loginform;
}
get loginIsInvalid(): boolean {
return this.service.loginform.invalid;
}
// then in the template of your component you can use:
[formGroup]="loginform"
[disabled]="loginIsInvalid"
您是否担心必须调用函数而不是仅使用模板中的变量?
抓住这个自执行函数的提示:
模板:
<form class="col-8" [formGroup]="loginform"> <!-- Change here-->
控制器:
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../shared/login.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
username : string;
password: string;
hide = true;
constructor(private service: LoginService) { }
ngOnInit() {
}
loginform = (() -> this.service.loginform)(); /* Change here */
}
如果您需要访问模板内该变量的某些内部字段,这会很有用。
<form class="col-8" [formGroup]="loginform.SOME_FIELD.INNER_PROP">
代替
<form class="col-8" [formGroup]="getLoginForm().SOME_FIELD.INNER_PROP">
它看起来更方便和可读,恕我直言。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.