Angular

Question

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

员工-detail.component.ts:

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

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

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

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

从上面的代码来看，点击按钮上的函数决定了两个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：Fragment

1.1 将 fragment 中的事件（联系人或个人资料）传递给 NavigationExtras。

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

执行操作

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

Sample Solution 1 on StackBlitz

好处：使用片段 #event.

更容易实现和操作内容

缺点：URL实现后会显示#event片段

解决方案 2：Build Simple Service to Share Data

2.1 使用 getter 和 setter 方法为 event$ 创建 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();
    });
  }
}

Sample Solution 2 on StackBlitz

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

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

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

Angular - How to call and activate a function from another component

typescript

angular12

解决方案 1：Fragment

解决方案 2：Build Simple Service to Share Data