Question

我正在构建一个简单的应用程序，其中在屏幕顶部有一个工具栏。工具栏中有一个+按钮，用于添加内容。根据哪个组件处于活动状态，此+按钮应该会打开一个对话框以添加特定的模型。

就像，如果我在“用户”页面/组件上，然后单击+按钮，我应该打开“添加用户”对话框（在用户组件上）。如果我在“公司”页面/公司上，也是如此。现在，该按钮应该会触发“创建公司”对话框。

这意味着我在常规工具栏中有一个常规按钮，具体取决于当前组件是什么，该按钮应该执行其他操作。

我无法确定如何做到这一点。到目前为止，我最好的选择是与观察者/可观察者共享服务以中继消息。但这似乎不是最好的方法。我有什么想念的吗？喜欢订阅消息吗？实现接口方法还是什么？

Answer 1

共享服务是应用此动态工具栏按钮单击的好方法。

每个组件将通过共享服务在ngOnInit上预订此按钮单击事件，并将在ngOnDestroy上取消订阅。这意味着您一次只能订阅一个。

签出这个简单的StackBlitz DEMO

示例代码：

first.component.ts：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { SharedService } from './shared.service';

@Component({
  selector: 'app-first',
  template: `<h1>This is first component</h1>`
})
export class FirstComponent implements OnInit, OnDestroy  {
  addSubscribe: Subscription;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.addSubscribe = this.sharedService.addClicked.subscribe(() => {
      alert('Add from First componenet');
    });
  }

  ngOnDestroy() {
    this.addSubscribe.unsubscribe();
  }
}

shared.service.ts：

import { Injectable } from '@angular/core';

import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  addClicked = new Subject();
}

app.component.ts：

import { Component, OnInit } from '@angular/core';

import { SharedService } from './shared.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
  }

  onAdd(): void {
    this.sharedService.addClicked.next();
  }
}

我认为这是一个简单，易于实现的解决方案，对您来说是个很好的解决方案。

Angular-如何使通用“添加”按钮在所有子组件中使用？

1 个答案: