javascript - Angular 7:基于产品构建:属性“服务”是私有的,只能在“组件”类中访问
问题描述
我正在使用 Angular 7。我运行此 cmdng build --prod
构建以进行保护。
那个时候我正在缓存这个错误(属性'服务'是私有的,只能在类'LoginComponent'中访问):
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:我自己暂时还没有测试过第二个。
推荐阅读
- python - 在 PIL 中将图像的尺寸更改为一半
- google-apps-script - 提交时触发脚本的 Google 表单始终无法正常工作
- c# - 取消从 Angular 到 .NET Core 的长操作
- c++ - std::shared_ptr operator= 更改对象,而不是指针值?
- python - 气流宏未转换为日期
- c# - Windows 窗体:根据列表选择显示唯一面板
- filter - PowerBI_filter IDs 专门包含列中的值
- docker - 是否可以从没有控制文件和系统表空间的单个数据文件中取回我的数据?
- ansible - ansible 中的 Gluster_Volume 模块
- javascript - 如何避免 docker-compose 中的“无效挂载路径”