Question

我从Angular2更新到Angular4，在文档中更新了它，使用Renderer2而不是Renderer，不推荐使用this.renderer.invokeElementMethod(element, 'focus', []);。

现在正在查看渲染器文件（https://github.com/angular/angular/blob/master/packages/core/src/render/api.ts），但找不到像以前那样调用焦点的方法。

旧方法：

let inputField = document.querySelectorAll('.dialog input'); if ( inputField[0] ) { inputField[0].focus(); }

新方法是什么？

修改

如果我选择的元素是通过QuerySelector完成的，例如：

dflist<-c('Block1', 'Block2') 

par(mfrow=c(2,2))

for (i in seq_along(dflist)) {
#Subset different Blocks
dataCorr<- subset(total , (block == dflist[i] ))

p.mat <- cor.mtest(dataCorr)
M<-cor(dataCorr)

col <- colorRampPalette(c("#BB4444", "#EE9988", "#FFFFFF", "#77AADD", "#4477AA"))
corrplot(M, method="color", col=col(200),  
       type="upper",  title = title,
       addCoef.col = "black", # Add coefficient of correlation
       tl.col="red", tl.srt=45, #Text label color and rotation
       # Combine with significance
       p.mat = p.mat, sig.level = 0.05, insig = "blank", 
       diag=TRUE,
      mar=c(0,0,1,0) )}

自从使用querySelector选择后，焦点方法就不存在了。

Answer 1

{@ 1}}已弃用，并且无法返回到新的渲染器。要将焦点设置为元素，您现在可以立即使用它：

invokeElementMethod

如果您使用的是element.nativeElement.focus();，那么您正在做的不是棱角分明的方式，您应该找到另一种方法。如果没有其他办法，那么适用同样的原则。 document.querySelectorAll方法是纯JavaScript，因此您可以在angular2 / typescript中使用它。请确保在组件的focus()挂钩内执行querySelectorAll：

ngAfterViewInit

Answer 2

您也可以使用 Renderer2 的 selectRootElement 方法。

例如：

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').focus()

，其中 domElementId 在您的HTML中 id =＆＃39; domElementId＆＃39;

Answer 3

// Specifying columns
$userData = User::find(array("columns"=>"id,username"));
var_dump(get_class($userData[0])); // "Phalcon\Mvc\Model\Row"

// Selecting whole objects
$userData = User::find();
var_dump(get_class($userData[0])); // "Users"

Answer 4

此时，如果不直接修改DOM，似乎无法实现此任务。正如其他人所说，不推荐使用invokeElementMethod（）。但是，您也会发现使用selectRootElement的问题，因为这不是它的预期目的，您最终会丢失DIV中的子项。这是一个SO问题的链接，更详细地解释了selectRootElement（因为有角度的文档非常糟糕）：

Renderer multiple selectRootElement Issue (with plnkr provided)

至于现在，看起来轻松实现目标的唯一方法是使用模板引用变量，视图子项和yourViewChild.nativeElement.focus（）（虽然也不推荐这种做法）

还有一个使用此GitHub问题上的FocusService的建议解决方法：https://github.com/angular/angular/issues/15674

在本期中，Tytskyi提到您可以实现FocusService并基于AppModuleBrowser和AppModuleServer提供focus（）的不同实现。我不确定如何工作的细节，但它可能是目前不使用nativeElement实现这一目标的唯一方法。

Answer 5

如果您使用的是Angular CDK，则可以使用FocusMonitor.focusVia可访问性模块（A11yModule）中的@angular/cdk/a11y方法来设置焦点。

通过这种方式，您可以避免任何DOM操作，并避免完全引用nativeElement。


import { FocusMonitor } from '@angular/cdk/a11y';


export class ExampleComponent implements AfterViewInit {
  @ViewChild('elem', {static: false}) elemRef;

  constructor(private focusMonitor: FocusMonitor) {
  }

  ngAfterViewInit() {
    // Programmatically set focus. Focus source is 'program'.
    this.focusMonitor.focusVia(this.elemRef, 'program');
  }
}

Answer 6

如果您声明inputField变量的正确类型，则可以使用任何JS查询选择器。

对于声明的实例：
let inputField: HTMLInputElement = document.querySelector('.dialog input');
使您可以拨打电话
inputField.focus();
它将正常工作，并且不会引发TS错误。

如何关注Angular中的一个字段

6 个答案: