以角度禁用另一个组件的表单字段答案

【问题标题】：Disable a form field from another component in angular以角度禁用另一个组件的表单字段
【发布时间】：2020-11-24 06:18:52
【问题描述】：

我有三个基于角材料的单选按钮，即男性、女性和其他。所以这三个存在于一个组件中。我在另一个名为 page1 的组件中也有三个表单字段，即 A、B、C。当我按下男性单选按钮并转到 page1 组件时，page1 组件中的表单字段 A 和 B 应该不可见。当我按下女性或其他单选按钮时，page1 组件中的所有三个表单字段都应该存在。我已经尝试了一天，但没有任何效果。如果你知道请帮忙

注意：我正在使用有角材料（垫子表单字段和垫子单选按钮）。在 stackblitz 中我无法安装这些，所以请以有角度的材料方式进行安装

我附上了一个示例 stackblitz 链接： https://stackblitz.com/edit/angular-button-routerlink-mmn77s?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

创建gettter-setter 方法或在您的服务中使用subjct。并根据预期的行为在不同的组件中使用该值。
你能在 stackblitz 链接中这样做吗？
不，我告诉过你这个过程试图实现它。如果您在实施后发现任何问题，请提出单独的问题。这个论坛不是为别人写代码的。

标签： javascript angular forms angular-material

【解决方案1】：

您可以使用 BehaviorSubject 或 Subject 来触发函数调用

TriggerService.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/internal/BehaviorSubject";

@Injectable()
export class TriggerService {
  constructor() {}
  private _trigger = new BehaviorSubject<string>("");
  castTrigger = this._trigger.asObservable();

  trigger(value) {
    this._trigger.next(value);
  }
}

parent.component.ts

export class AppComponent {
  constructor(private triggerService: TriggerService) {
    document.title = "Home";
  }

  changeType(value) {
    this.triggerService.trigger(value);
  }
}

child.component.ts

ngOnInit() {
  this.triggerService.castTrigger.subscribe(value => {
    this._type = value;
  });
}

stackblitz example

【讨论】：

有没有更简单的方法？
抱歉不知道其他方法，如果父模板中提到了子组件，那么我们将类型作为@Input传递给子组件