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

Question

i have a page with main parent element and two child elements quite like this.

how can i focus on the text box in the child2 component, when clicked on the button on child 1 component.

child 1 component is actually the header section of my page. so there may also be cases like child1 is always visible, but instead of child2, there is some different component on display. then when i click on the button on child1, it should route to child2 and then scroll down and focus on the required text box of child 2..

how to implement this function in angular.

Answer 1

First of All you have to add the routing to your Child2(Assuming it as a class name) So that when user clicks the button on your header it is routed to Child2.

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

2.And then use Angular life cycle hooks -> ngOnInit() {} ngOnInit is a life cycle hook called by Angular to indicate that the Angular is done creating the component. And place some typescript code to make the textbox in focus.

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

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

You can build some approach over the above example. or

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

This will bring in focus into the textbox that is present in the component child2

Answer 2

Here is how you can implement this

1. Create one service will have to methods
2. Put in app.module.ts providers
3. Now inject this SharedService to child-one-component.ts and call setData() method of this service where we are setting value in observable
4. Now inject same SharedService to child-two-component.ts and call getData() method of service onInit() will subscribe to observable at the same time when you click on setData()

app.component.html

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

child-one.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>

child-one.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);
  }

}

child-two.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 will use this service to send message from one component to another.

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

Here is working demo https://stackblitz.com/edit/santosh-angular-set-focus-in-input-from-another-component