要在Angular 6中使用新构建的HTML打开新标签页,可以使用window.open()
方法来创建新标签页,并将HTML内容作为参数传递给它。
以下是一个示例代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-new-tab',
template: `
{{title}}
{{content}}
`
})
export class NewTabComponent {
@Input() title: string;
@Input() content: string;
}
Renderer2
来创建新的HTML元素,并将其插入到页面中。然后,使用window.open()
方法来打开新标签页,将新构建的HTML内容作为参数传递给它。import { Component, Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
constructor(private renderer: Renderer2, private el: ElementRef) { }
openNewTab() {
// 创建新的HTML元素
const newTab = this.renderer.createElement('app-new-tab');
// 设置输入数据
this.renderer.setProperty(newTab, 'title', '新标签页标题');
this.renderer.setProperty(newTab, 'content', '新标签页内容');
// 将新元素插入到页面中
this.renderer.appendChild(this.el.nativeElement, newTab);
// 打开新标签页并传递HTML内容
window.open('', '_blank').document.write(newTab.outerHTML);
}
}
请注意,这里使用了Renderer2
来创建新的HTML元素,并将其插入到页面中。然后,使用window.open()
方法打开新标签页,并使用document.write()
方法将新构建的HTML内容写入到新标签页中。
希望这个示例能帮助到你!