在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焦點元素不起作用

回答

相關問題