問題

我的專案中有一個標題. 標題包括他內部的一個按鈕。 現在我的專案中有新的元件和新模組,我想使用相同的標題,但沒有按鈕. 我該怎麼做? 我的標題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>
 

謝謝有一個好的編碼日:)

  最佳答案

您可以在服務中放置一個可以全域性使用的變數,並使用相同的變數來禁用和啟用button.也就是說,當您想禁用按鈕時,您可以在該元件的ngOnInit中使變數’true’.

示例程式碼service.ts

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

示例程式碼元件_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
      }
}
 

示例程式碼元件_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 also 中匯入 dataservice。

  相同標籤的其他問題

angular