angular - 在具有按钮的标题上设置条件(禁用/显示按钮)[Angular]

Question

我的项目中有一个标题。标题中包含一个按钮。 现在我的项目中有一个新组件和一个新模块，我想使用相同的 header 但没有按钮。我怎样才能做到这一点？

我的标题 HTML

<header>
    <div class="container">
        <button mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before">+</button>
        <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
            <app-reports-list></app-reports-list>
        </mde-popover>
    </div>
</header>

在我的原始组件中:

<app-header></app-header>
<main>
    <app-reports></app-reports>
</main>
<app-footer></app-footer>

在我的新组件中(这里我希望它没有按钮，只有标题)

<app-header></app-header>
<main>
    <app-kit-process></app-kit-process>
</main>
<app-footer></app-footer>

谢谢，祝你编码日愉快:)

Answer 1

您可以在服务中放置一个可以全局使用的变量，并使用它来禁用和启用按钮。也就是说，当您想要禁用该按钮时，可以在该组件的 ngOninit 中将变量设置为“true”。

示例代码 service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class dataService {
 showbutton: boolean = true;}

示例代码component_1.ts

import { Component, OnInit} from '@angular/core';
import { dataService } from '../service/data.service';
@Component( {
    selector: 'app-component_1',
    templateUrl: './component_1.component.html',
    styleUrls: ['./component_1.component.css']
} )
export class component_1 {
    constructor( public bookmarkRoot: dataService, private router: Router){}
    ngOnInit() {
       this.bookmarkRoot.showbutton=false  //hide/disable button
      }
}

示例代码component_2.ts

import { Component, OnInit } from '@angular/core';
import { dataService } from '../service/data.service';
@Component( {
    selector: 'app-component_2',
    templateUrl: './component_2.component.html',
    styleUrls: ['./component_2.component.css']
} )
export class component_2 {
    constructor( public bookmarkRoot: dataService, private router: Router){}
    ngOnInit() {
       this.bookmarkRoot.showbutton=true//hide/disable button
      }
}

标题 HTML

<header>
  <div class="container">
    <button mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="before" [disable]="bookmarkRoot.showbutton">+</button>
    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
      <app-reports-list></app-reports-list>
    </mde-popover>
  </div>
</header>

您还必须在 header.component 中导入数据服务。您可以仅从 stackover flow 找到如何使用服务在组件之间进行通信