Angular - 如何从另一个组件调用和激活 function

Question

在我的 Angular-12 中，我有两个组件，employee-detail 和 employee-edit。

employee-detail.component.ts：

profileTemplate: boolean = false;
contactTemplate: boolean = false;

profileFunction() {
  this.profileTemplate = true;
  this.contactTemplate = false;
}

contactFunction() {
  this.profileTemplate = false;
  this.contactTemplate = true;
}

employee-detail.component.html

<div class="card-body">
  <div id="external-events">
    <button (click)="profileFunction()" type="button" class="btn btn-block btn-primary">Profile</button>
    <button (click)="contactFunction()" type="button" class="btn btn-block btn-success">Contact</button>
  </div>
</div>

<div *ngIf="profileTemplate" class="card card-default color-palette-box">

</div>

<div *ngIf="contactTemplate" class="card card-default color-palette-box">

</div>

从上面的代码来看，点击按钮上的function决定了两个div中的哪个是可见的。 现在我有另一个组件，employee-edit。

员工-edit.component.ts：

onSubmitProfile() {
  this.router.navigate(['/employees-detail', this._id]);
}

onSubmitContact() {
  this.router.navigate(['/employees-detail', this._id]);
}

我想要实现的是，当调用onSubmitProfile()时，它应该激活profileFunction()并使

<div *ngIf="profileTemplate" class="card card-default color-palette-box"> 

可见，否则如果它是onSubmitContact()它应该是

<div *ngIf="contactTemplate" class="card card-default color-palette-box"> 

我如何实现这一目标？

谢谢

Answer 1

解决方案 1： 片段

1.1使用NavigationExtras在fragment中传递事件（联系人或个人资料）。

员工-edit.component.ts

export class EmployeeEditComponent implements OnInit {

  onSubmitProfile() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }

  onSubmitContact() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }
}

1.2从activatedRoute中获取fragment并根据fragment做动作。

员工详细信息.component.ts

import { ActivatedRoute, Router } from '@angular/router';

export class EmployeeDetailComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.fragment.subscribe(fragment => {
      if (fragment == 'profile') this.profileFunction();
      else if (fragment == 'contact') this.contactFunction();
    });
  }
}

StackBlitz 上的示例解决方案 1

好处：使用片段#event更容易实现和操作内容。

缺点：URL 将显示片段#event ，因为它已实现。

---

解决方案 2： 构建简单的服务来共享数据

2.1使用event$的 getter 和 setter 方法创建EmployeeEventService 。

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

@Injectable({
  providedIn: 'root'
})
export class EmployeeEventService {
  private event$: BehaviorSubject<
    keyof typeof EVENT | null
  > = new BehaviorSubject(null as keyof typeof EVENT | null);

  setEvent(event: keyof typeof EVENT) {
    this.event$.next(event);
  }

  getEvent() {
    return this.event$.asObservable();
  }
}

export enum EVENT {
  contact,
  profile
}

2.2注入EmployeeEventService并通过setEvent()设置事件。

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeEditComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  onSubmitProfile() {
    this.employeeEventService.setEvent('profile');
    this.router.navigate(['/employees-detail', this._id]);
  }

  onSubmitContact() {
    this.employeeEventService.setEvent('contact');
    this.router.navigate(['/employees-detail', this._id]);
  }
}

2.3注入EmployeeEventService并通过getEvent()获取event$ Observable。

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeDetailComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  ngOnInit() {
    this.employeeEventService.getEvent().subscribe(event => {
      if (event == 'profile') this.profileFunction();
      else if (event == 'contact') this.contactFunction();
    });
  }
}

StackBlitz 上的示例解决方案 2

好处：通过服务控制event （解决方案 1 的缺点的好处）。

缺点：与解决方案 1 相比更难实施。