Question

在某些事件中，我需要导航到不同的路线并关注其中一个输入字段。

我的模板

<qualification>

<address (updateAddress)="updateAddress($event);"> 

</address>

</qualification>

在地址组件html中的一个按钮

<span class="filter-address" (click)="updateAddressClicked()">Update Address </span>

在地址组件

中

@Output() updateAddress = new EventEmitter();
updateAddressClicked($event){
     this.router.navigate(['/page/one'], {preserveQueryParams: true})
     this.updateAddress.emit(true);
}

在资格认证组件中，我将vc定义为

@ViewChildren('inputone') vc;

html on qualificatioin

<input #inputone name="inputone">

和

updateAddress($event){
    this.vc.first.nativeElement.focus()
}

当我在/ page / one route中并导航到/ page / one route（即自身）时，焦点会起作用。但是，如果我在不同的路线让我们说/ page / two然后当事件触发导航到/ page / one很好但是我得到的错误说

EXCEPTION：Uncaught（在promise中）：TypeError：无法读取属性＆＃39; nativeElement＆＃39;未定义的

感谢任何帮助。

Answer 1

在您当前的组件中：

this.router.navigateByUrl(['/page/one?event=true'], {preserveQueryParams: true})

然后在您的组件中进行路由以执行此操作。

constructor(private activatedRoute: ActivatedRoute) {}

ngAfterViewInit() {
  this.subscription = this.activatedRoute.params.subscribe(
    (param: any) => {
    let event = param['event'];
    if(event) {
      this.vc.first.nativeElement.focus();
    }
 });
}

这应该允许你根据事件queryparam的存在有条件地关注。

router.navigate不起作用后的angular 2 focus元素

1 个答案: