angular - Angular 获取 URL 参数并将它们写入输入字段

Question

我有一个系统，其中有一个更改密码组件。这里的问题是我的来自 resetPW 的 URL 参数进入了第一个输入字段。

当我加载页面时，来自重置的参数进入第一个输入字段

这是我的component.html：

<div class="container">
<h3>Reset Password</h3>
<form (ngSubmit)="resetPassword(f)" #f="ngForm" ngNativeValidate>
<div class="form-group">
<input type="password" minlength="8" class="form-control" placeholder="Nyt 
Password" id="newPassword" name="newPassword" [(ngModel)]="newPassword" 
charracters minimum required autofocus>
</div>
<div class="form-group">
<input type="password" minlength="8" class="form-control" 
placeholder="Gentag Nye Password" id="repeatPassword" name="repeatPassword" 
[(ngModel)]="repeatPassword" charracters minimum required autofocus>
</div>
<button class="button" type="submit">Change password</button>
</form>
<br>
  <p>{{notChangedPassword}}</p>
</div>

这是我的component.ts：

export class ResetPWComponent implements OnInit {
@Input("newPassword") newPassword;
@Input("repeatPassword") repeatPassword;
notChangedPassword: string;
urlParams;
paramsArray = [];

constructor(private authService: AuthService, private activatedRoute: 
ActivatedRoute) {
this.newPassword = new FormGroup({
newPassword: new FormControl("newpassword", Validators.compose([
Validators.required,
Validators.pattern("^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$")
])),
repeatPassword: new FormControl("repeatPassword", Validators.compose([
Validators.required,
Validators.pattern("^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$")
])),
})
this.activatedRoute.queryParams.subscribe(params => {
this.urlParams = params["reset"];
})
this.authService.notChangedPassword.subscribe((data) => {
this.notChangedPassword = data;
})

}

ngOnInit() {
this.paramsArray = this.urlParams.split(".", 4);
}

resetPassword(form: NgForm) {
const token = this.paramsArray[0] + "." + this.paramsArray[1] + ".";
const email = this.paramsArray[2] + "." + this.paramsArray[3];
const newPassword = form.value.newPassword;
const repeatPassword = form.value.repeatPassword;
this.authService.changePassword(token, email, newPassword, repeatPassword);
}

}

出于某种原因，此行确实将 url 参数放在输入字段中：

this.activatedRoute.queryParams.subscribe(params => {
this.urlParams = params["reset"];
})

我不明白为什么会这样，有人可以帮忙吗？

标签： angulartypescripturlangular6angular-activatedroute