当我运行此代码时,它向我显示一个空白屏幕但是当我使用chrome中的开发人员工具更新代码时,它会显示数据.请帮助解释为什么它显示我使用chrome的开发人员工具更新代码的时候,是因为浏览器再次运行DOM,如果是,那么为什么不在第一次显示它时.这是否由于foreignObject而发生.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
var s = document.getElementById('t');
var g = s.childNodes[1];
console.log(g.childNodes[1].remove());
var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txt.setAttribute('x', '10');
txt.setAttribute('y', '10');
var t = document.createTextNode("This is a paragraph.");
txt.appendChild(t);
foreign.appendChild(txt);
g.appendChild(foreign);
</script>
</body>
</html>
我有以下功能进行单元测试.我在元件中采用了带有视图子元素的文本框元素,在测试中我需要在setTimeout()调用之后测试我的文本框是否有焦点.
@ViewChild('searchInput') searchInput: ElementRef;
function A(show) {
const self = this;
if (show) {
this.xyz= true;
setTimeout(function () {
self.searchInput.nativeElement.focus();
}, 0);
} else {
self.xyz= false;
self.abc = '';
}
}
这是我正在尝试的测试用例:
it('textbox get focus toggleSearch', async(() => {
let el: DebugElement;
component.toggleSearch(true);
el = fixture.debugElement.query(By.css('#search-input-theme'));
let native: HTMLElement = el.nativeElement;
spyOn(native,'focus');
fixture.whenStable().then(() => {
expect(native.focus).toHaveBeenCalled();
});
}));