Javascript 如何在angular 8中从一个组件访问另一个组件的div id

我有一个header组件和home组件。在header component中有一个下载按钮，当我单击download按钮时，home component的内容将被下载，因此我需要从header component访问home component的div id（内容）。我不知道怎么做

header.component.html home.component.html

---

您可以在父组件上使用

output/eventEmitter

来执行此操作，但您需要将

包含在

主组件中，而不是
应用程序
组件中

如果您想将
保留在
应用程序
组件中，则需要另一种方法，可能需要使用服务在标头和主组件之间进行通信

header.component.html

<button (click)="downloadClicked.emit(null)" type="button" class="btn btn-primary">Download</button>

<router-outlet></router-outlet>
<app-footer></app-footer>

下载

header.component.ts

export class HeaderComponent implements OnInit {

  @Output() 
  downloadClicked: EventEmitter<any> = new EventEmitter();

  constructor(public router: Router){} 

  ngOnInit() {
  }   
}

<app-header (downloadClicked)="generarPDF()"></app-header>
<div class="container-fluid" id="content">
...

导出类HeaderComponent实现OnInit{
@输出（）
下载单击：EventEmitter=neweventemitter（）；
构造函数（公共路由器：路由器）{}
恩戈尼尼特（）{
}   
}

home.component.ts

export class HeaderComponent implements OnInit {

  @Output() 
  downloadClicked: EventEmitter<any> = new EventEmitter();

  constructor(public router: Router){} 

  ngOnInit() {
  }   
}

<app-header (downloadClicked)="generarPDF()"></app-header>
<div class="container-fluid" id="content">
...


...

app.component.html

<button (click)="downloadClicked.emit(null)" type="button" class="btn btn-primary">Download</button>

<router-outlet></router-outlet>
<app-footer></app-footer>

您可以在父组件上使用
输出/eventEmitter
来执行此操作，但您需要将
包含在
主页
组件中，而不是
应用程序
组件中

如果您想将
保留在
应用程序
组件中，则需要另一种方法，可能需要使用服务在标头和主组件之间进行通信

header.component.html

<button (click)="downloadClicked.emit(null)" type="button" class="btn btn-primary">Download</button>

<router-outlet></router-outlet>
<app-footer></app-footer>

下载

header.component.ts

export class HeaderComponent implements OnInit {

  @Output() 
  downloadClicked: EventEmitter<any> = new EventEmitter();

  constructor(public router: Router){} 

  ngOnInit() {
  }   
}

<app-header (downloadClicked)="generarPDF()"></app-header>
<div class="container-fluid" id="content">
...

导出类HeaderComponent实现OnInit{
@输出（）
下载单击：EventEmitter=neweventemitter（）；
构造函数（公共路由器：路由器）{}
恩戈尼尼特（）{
}   
}

home.component.ts

export class HeaderComponent implements OnInit {

  @Output() 
  downloadClicked: EventEmitter<any> = new EventEmitter();

  constructor(public router: Router){} 

  ngOnInit() {
  }   
}

<app-header (downloadClicked)="generarPDF()"></app-header>
<div class="container-fluid" id="content">
...


...

app.component.html

<button (click)="downloadClicked.emit(null)" type="button" class="btn btn-primary">Download</button>

<router-outlet></router-outlet>
<app-footer></app-footer>


您必须使用父子组件概念。尝试此文档对象访问-->不应在getTreatment（）方法中构造HTML。请看在模板中使用*ngFor。您必须使用父子组件概念。尝试此文档对象访问-->不应在getTreatment（）方法中构造HTML。请看在模板中使用*ngFor。