如何专注于 angular 中的文本框交叉组件

Question

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

当单击子 1 组件上的按钮时，如何专注于子 2 组件中的文本框。

child 1 组件实际上是我页面的 header 部分。 所以也可能有像 child1 总是可见的情况，但不是 child2，而是显示了一些不同的组件。 然后当我单击 child1 上的按钮时，它应该路由到 child2，然后向下滚动并专注于 child 2 所需的文本框。

如何在 angular 中实现这个 function。

Answer 1

首先，您必须将路由添加到您的 Child2（假设它是 class 名称），以便当用户单击 header 上的按钮时，它会被路由到 Child2。

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

2.然后使用 Angular 生命周期钩子 -> ngOnInit() {} ngOnInit 是由 Angular 调用的生命周期钩子，表示 ZC31C335EF37283C451B18BA0DD317DE1 正在创建组件。 并放置一些 typescript 代码以使文本框成为焦点。

<input type="text"><a href="#textbox"></a>Go to bottom</input>

<input type="text" id="textbox"></footer>

您可以在上面的示例中构建一些方法。 或者

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

这将使焦点进入组件 child2 中存在的文本框

Answer 2

这是您如何实现此功能的方法

1. 创建一个服务必须要方法
2. 放入app.module.ts提供者
3. 现在将此SharedService注入 child-one-component.ts 并调用此服务的setData()方法，我们在 observable 中设置值
4. 现在将相同的SharedService注入 child-two-component.ts 并调用服务的getData()方法onInit()将在您单击setData()时同时订阅 observable

app.component.html

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

儿童一号.html

<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>

小孩子.ts

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);
  }

}

孩子二.html

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

child-two.ts

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();
      }
    })
  }

}

app.module.ts

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 { }

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();
  }
}

这是工作演示https://stackblitz.com/edit/santosh-angular-set-focus-in-input-from-another-component