Создайте условие для заголовка с кнопкой (Отключить / Показать кнопку) [Угловой]

Question

У меня есть заголовок в моем проекте. Заголовок включает в себя кнопку внутри него. Теперь у меня есть новый компонент и новый модуль в моем проекте, и я хочу использовать тот же заголовок, но без кнопки. Как я могу это сделать?

Мой заголовок 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

Я нашел простое решение:

Я добавил маршрутизатор в мой файл заголовка ts

constructor(private _router: Router) {}

Тогда я в своем html-заголовке создаю условие

<header>
  <div class="container">
    <button *ngIf="_router.url != '/kit'" 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>

Answer 2

вы можете поместить переменную, которая может использоваться глобально в Сервисе, и использовать ее для отключения и включения кнопки. то есть, когда вы хотите отключить кнопку, вы можете сделать переменную 'true' в ngOninit этого компонента.

Пример кода 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>

Вы также должны импортировать dataservice в header.component. Вы можете найти, как использовать сервис для связи между компонентами только из потока стеков

Answer 3

Вместо использования службы для простого включения / выключения элементов компонента, простым решением может быть использование входных переменных.

В компоненте заголовка приложения просто укажите входную переменную, например «isApproverAdd», и передайте входные данные от отдельныхКомпоненты:

app-header.component.ts:

import { Component, OnInit, Input} from '@angular/core';
@Component( {
    selector: 'app-header',
    templateUrl: './app-header.html'
} )
export class AppHeader {
@Input() isApproverAdd : boolean;

    constructor( ){}
    ngOnInit() {

      }
}

app-header.component.html

<header>
  <div class="container">
    <button mat-fab class="mat-success" *ngIf="isApproverAdd" [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 [isApproverAdd]="true" ></app-header>
<main>
    <app-reports></app-reports>
</main>
<app-footer></app-footer>

Новый компонент:

<app-header [isApproverAdd]="false" ></app-header>
    <main>
        <app-reports></app-reports>
    </main>
    <app-footer></app-footer>