Javascript 如何将焦点放在文本框中的交叉组件上

我有一个包含主父元素和两个子元素的页面，就像这样。

当单击Child1组件上的按钮时，如何关注child2组件中的文本框

child1组件实际上是我的页面的标题部分。因此，也可能有像child1始终可见这样的情况，但与child2不同的是，屏幕上显示的是一些不同的组件。然后，当我点击child1上的按钮时，它应该转到child2，然后向下滚动，并聚焦于child2所需的文本框

---

如何在angular中实现此功能。

首先，您必须将路由添加到您的孩子2，并将其假设为类名，以便当用户单击标题上的按钮时，路由到孩子2

 1.<button class="header" [routerLink]="['Child2']">Child2</button>
//Child2 is the name of child2 Component

---

这将把焦点放在组件child2中的文本框中

创建一个服务将必须创建多个方法 放入app.module.ts提供程序 现在，将这个SharedService注入child-one-component.ts，并调用这个服务的setData方法，在这里我们在observable中设置值 现在将相同的SharedService注入child-two-component.ts并调用服务的getData方法onInit将在单击setData的同时订阅observable app.component.html

child-two.html

app.module.ts

shared.service.ts将使用此服务将消息从一个组件发送到另一个组件

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class SharedService {
  private subject$ = new Subject<any>();
  constructor() { }
  setData(data) {
    this.subject$.next(data);
  }
  getData() {
    return this.subject$.asObservable();
  }
}

这里是工作演示

document.getElementById("textbox").click();

<app-child-one></app-child-one>
<app-child-two></app-child-two>

<div style="border: 2px solid black; padding:15px; margin-bottom:3px">
    <p>child-one </p>
    <button (click)="setFocus()">Set Focus</button>
    <button (click)="removeFocus()" style="margin-left:10px;">Remove Focus</button>
</div>

import { Component, OnInit, EventEmitter } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-child-one',
  templateUrl: './child-one.component.html',
  styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {
  constructor(private sharedService: SharedService) { }

  ngOnInit() {
  }
  setFocus() {
     this.sharedService.setData(true);
  }
  removeFocus() {
     this.sharedService.setData(false);
  }

}

<div style="border: 2px solid black; padding:25px 15px;">
  <p>child-two </p>
<input type="text" placeholder="Enter text" #input/>
</div>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-child-two',
  templateUrl: './child-two.component.html',
  styleUrls: ['./child-two.component.css']
})
export class ChildTwoComponent implements OnInit {
  @ViewChild('input', {static: true}) private input: ElementRef;
  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    // will get called when user click on Set Focus button
    this.sharedService.getData().subscribe((response: any)=> {
      if(response) {
        this.input.nativeElement.focus(); // will set focus into input here
      } else {
        this.input.nativeElement.blur();
      }
    })
  }

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ChildOneComponent } from './child-one/child-one.component';
import { ChildTwoComponent } from './child-two/child-two.component';
import { SharedService } from './shared.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ChildOneComponent, ChildTwoComponent ],
  bootstrap:    [ AppComponent ],
  providers: [SharedService]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class SharedService {
  private subject$ = new Subject<any>();
  constructor() { }
  setData(data) {
    this.subject$.next(data);
  }
  getData() {
    return this.subject$.asObservable();
  }
}