在router.navigate之后的角度2焦点元素不起作用

在某些事件中，我需要导航到不同的路线并聚焦其中一个输入字段。在router.navigate之后的角度2焦点元素不起作用

我的模板

<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;

上qualificatioin HTML

<input #inputone name="inputone">

和

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

当我在/页/一个路线并导航到/页/一个线路（即本身）焦点作品。但是，如果我在不同的路线可以说，/页/两，然后当事件触发导航/页/一个是好的，但我得到的错误，说

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined

任何帮助表示赞赏。

来源

2016-12-16 rishal

哪个生命周期事件是被调用的焦点代码？你能显示完整的组件代码吗？ – JayChase

焦点代码在功能中，这是在另一个组件中的事件之后触发的。 – rishal

@JayChase我已经更新了OP – rishal

在当前的组件：

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的存在进行有条件的聚焦。

来源

2016-12-16 03:37:46 Baconbeastnz

但我只需要在事件被触发后调用它，所以正常的路由不会集中输入，只有当有特殊事件时，我需要改变路由并将输入集中在输入 – rishal

，因为您有任何使用param [事件']，我没有在参数中传递任何与事件相关的变量。 – rishal

就是这样，你可以有条件地触发你的输入焦点，因为你提到你只希望它发生在那个事件之后。您可以使用两个组件之间共享的双重绑定变量作为条件执行的基础，但不会看到您的代码，我无法真正帮助您。或者你可以设置一个项目并在localStorage中清除它。 – Baconbeastnz

在router.navigate之后的角度2焦点元素不起作用

回答

相关问题