Question

我的角度应用程序中有两个组件，一个是导航栏组件，另一个是显示组件。在导航栏组件中有一个搜索按钮，用于搜索输入的名称并在显示组件中显示详细信息。所以如何我可以在显示组件中检查是否在导航栏组件中单击了搜索按钮，然后从导航栏组件中的搜索栏中获取名称，然后在显示组件中显示详细信息。我的意思是我只想在搜索按钮时点击详细信息显示在显示组件中。由于它们是两个不同的组件，我无法获得如何在搜索按钮的显示组件中添加和单击事件监听器。如何完成？

以下是导航栏组件：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse " id="navbarTogglerDemo01">
        <ul id="nav-mobile" class="nav navbar-nav mr-auto">
            <li ><h5 class="myId"></h5></li>
        </ul>
<ul class="nav navbar-nav ml-auto" >
    <li class="nav-item" *ngIf="isLoggedIn">
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2 ticketHold" type="search" placeholder="Search for a ticket" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0 ticketGet" (click)="search()">Search</button>
    </form>
    </li>
    </ul>
  </div>
</nav>

navbar.component.ts

import { Component, OnInit ,OnDestroy ,forwardRef,
 ChangeDetectorRef} from '@angular/core';
import {UserLogs} from '../../model/UserLog';
import { AuthService } from '../../services/auth.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { ViewEncapsulation } from '@angular/core';
import { ISubscription } from 'rxjs/Subscription';
@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit , OnDestroy {
  isLoggedIn:boolean;
  isRegister:boolean;
  private subscription: ISubscription;
  constructor(private authService :AuthService,
    private router : Router,
    private flashMsg : FlashMessagesService,private changeDetectorRef:ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription= this.authService.getAuth().subscribe(auth =>{
       if(auth)
      {
        console.log('logged in '+localStorage.getItem("token"));
        this.isLoggedIn=true;
        // if(localStorage.getItem("token")=="user")
        // {
        //   this.router.navigate(['/chat']);
        // }
        // else if(localStorage.getItem("token")=="consultant"){
        //   this.router.navigate(['/consultant']);
        // }
      }
      else{
        this.isLoggedIn=false;
        console.log('Logged out hhdfd');
        // this.router.navigate(['/']);
      }
      if (!this.changeDetectorRef['destroyed']) {
        this.changeDetectorRef.detectChanges();
    } 
    })
  }
  logOut()
  {
    localStorage.setItem("token","login");
    this.authService.logout(); 
    window.location.href="/";
    if (!this.changeDetectorRef['destroyed']) {
      this.changeDetectorRef.detectChanges();
  }
  }
  search()
  {
  }
  ngOnDestroy() {
    this.changeDetectorRef.detach();
    this.subscription.unsubscribe();
  }
  }

的Th

Answer 1

由于两个组件都不同，因此您可以在共享服务中创建主题。现在，在导航组件中单击每个按钮，您可以向此主题发出新值，并在显示组件中订阅对主题的更改。

这将创建您正在订阅的可观察事件流，并根据需要通过它传递任何数据。

// Import Subject
import {Subject} from 'rxjs/Subject';

// Consider the shared service is _service


// In navbar component
// public buttonClickEventTrack = new Subject();
search(){
this._service.buttonClickTrack.next(event);
}

// In Display component - 
// Inject shared service _service into constructor    
this._service.buttonClickEventTrack.subscribe(event => {
    // Track Button Click Event
});

您可以将点击事件推送到主题＆quot;按钮ClickEventTrack＆＃39;使用next（）方法。

如何在另一个组件中侦听按钮单击

1 个答案: