Angular 在具有按钮的标题上设置条件(禁用/显示按钮)[角度]
我的项目中有一个标题。标题中包含一个按钮。 现在我的项目中有了一个新组件和一个新模块,我想使用相同的标题,但不使用按钮。我该怎么做 我的标题HTMLAngular 在具有按钮的标题上设置条件(禁用/显示按钮)[角度],angular,Angular,我的项目中有一个标题。标题中包含一个按钮。 现在我的项目中有了一个新组件和一个新模块,我想使用相同的标题,但不使用按钮。我该怎么做 我的标题HTML <header> <div class="container"> <button mat-fab class="mat-success" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" mdePopoverPositionX="
<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>
+
在我的原始组件中:
在我的新组件中(这里我希望它没有按钮,只是标题)
谢谢,祝您有一个愉快的编码日:)您可以在服务中放置一个可以全局使用的变量,并使用该变量禁用和启用按钮。当您想禁用该按钮时,可以在该组件的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
}
}
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
}
}
示例代码组件_2.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
}
}
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中导入dataservice。您可以从stackover flow only中找到如何使用服务在组件之间进行通信我找到了一个简单的解决方案: 我已将路由器添加到我的头文件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>
+
相反,使用服务只启用/禁用组件元素,简单的解决方案可以是使用输入变量
在应用程序标题组件中,只需使用一个输入变量,如“IsAppOverAdd”,并从各个组件传递输入:
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>
新的组成部分:
<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>
这只是一个示例,不要复制粘贴。只要顺着这条路走,很容易