angular - 在具有按钮的标题上设置条件(禁用/显示按钮)[Angular]
问题描述
我的项目中有一个标题。标题中包含一个按钮。现在我的项目中有一个新组件和一个新模块,我想使用相同的标题但没有按钮。我怎样才能做到这一点?
我的标题 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>
谢谢,祝你编码愉快:)
解决方案
您可以在服务中放置一个可以全局使用的变量,并使用它来禁用和启用按钮。也就是说,当您想要禁用该按钮时,您可以在该组件的 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 流中找到如何使用服务在组件之间进行通信
推荐阅读
- configuration - 崇高的文字:plugin_host 是“无法打开频道”
- c# - ORA-12154 使用连接字符串时
- javascript - 使用 Javascript 和 C# Web 将文件转换为二进制文件
- javascript - 检查localStorage中是否有值,如果没有显示替代消息(Javascript)
- ruby-on-rails - Rails 视图中的 Ruby 模块函数,手动渲染
- selenium - Selenium 脚本没有在 Jenkins 上的 Chrome 上运行,但它可以在 eclipse 中运行
- angular - Angular XLSX:包含小数的单元格文本在将 excel 转换为 JSON 对象时给了我一些随机数
- java - 无法使用 Java 流()映射级联列表的字段
- node.js - Next.js 应用程序在创建图像后无法正常工作
- android - 使用 Json Api 的颤振图表