如何在注销angular 4后禁用按钮？
在注销Angular 4后禁用按钮，可以通过以下步骤实现：
- 在组件的HTML模板中，给按钮添加一个属性绑定，例如
[disabled]="isDisabled"，其中isDisabled是一个布尔类型的变量。 - 在组件的Typescript代码中，定义并初始化
isDisabled变量为false，表示按钮初始状态为可用。 - 在组件的注销方法中，将
isDisabled变量设置为true，即禁用按钮。例如：
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnDestroy {
isDisabled: boolean = false;
ngOnDestroy() {
this.isDisabled = true;
}
}这样，在组件注销时，isDisabled变量会被设置为true，从而禁用按钮。
这种方法适用于Angular 4及以上版本，并且不依赖于任何特定的云计算品牌商。
相关·内容
1回答
我的app.component.ts代码：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
isDisabled = false;
ngOnInit
浏览 4提问于2022-08-02得票数 0
回答已采纳
4回答
在角2+组件中，如何传递接受参数的回调函数？我最初的假设是
<app-example [onComplete]="doThing('someParam')"></app-example>
有时候我不需要任何参数，像这样：
<app-example [onComplete]="doSomeThingElse()"></app-example>
然后在我拥有的组件中
import { Component, OnInit } from '@angular/core';
@Componen
浏览 7提问于2017-12-28得票数 19
回答已采纳
当在从单独文件导入的主机元素上具有动画的组件上运行测试时，我遇到了问题(因此可以在另一个组件中重用它)。
example.animation.ts
import { trigger } from '@angular/animations';
export const ExampleAnimationHost = { '[@example]': '' };
export const ExampleAnimationTrigger = trigger('example', []);
example.component.ts
impo
浏览 1提问于2017-07-04得票数 0
回答已采纳
是否可以使用组件的提供者数组向另一个服务提供服务？ 我尝试过以这种方式注入服务，但没有成功。 这就是我提供服务的组件。 @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [{ provide: EXAMPLE_TOKEN, useClass: ExampleService }] <---- this doesn't work a
浏览 13提问于2021-09-01得票数 0
回答已采纳
我遵循上述解决方案，但无法正确显示css。
当我添加时，它返回对象模块而不是css内容：
component.ts
this.styleService.addStyle('usergrid1css', require('../../../assets/css/clr.css'));
html
<style>[object module]</style>
有人能帮我吗？
提前感谢！
code below extracted from the url above
import { Injectable } from '@angu
浏览 0提问于2020-05-08得票数 1
学习angular5。当我使用CLI (角的CLI)创建新的组件时，我得到以下代码：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.None
})
expor
浏览 5提问于2017-11-10得票数 0
回答已采纳
这是我在RatingInputComponent的@component装饰器中使用的提供者。
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingInputComponent),
multi: true
}
]
我得到了一个ts-lint错误：'RatingInputComponent‘是在定义之前使用的。但是forwardRef允许引用尚未定义的引用。
我用的是角9.1.3
完整的ts文件。
import { Comp
浏览 4提问于2020-07-26得票数 0
1回答
我正在尝试使用角2.0.0-beta.15，中的手风琴或面板，但当我试图使其工作时，我有以下消息“属性'ngOnDestroy‘在’NgbAccordionGroup‘中丢失了。”
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, OnDestroy} from '@angular/core';
@Component({
selector: 'ngb-accordion,[ngb-accordion]',
inputs:
浏览 3提问于2016-06-07得票数 1
回答已采纳
因此，假设我有一个组件ExampleComponent，它在其content视图中构建SomeOtherComponent组件的QueryList。
import {Component, ContentChildren, QueryList} from '@angular/core'
import {SomeOtherComponent} from '../some-other-component/some-other-component.component'
@Component({
selector : &
浏览 49提问于2019-06-13得票数 7
我使用的是Angular 7，并且我正在尝试使用交错来设置组件列表的动画。当列表初始化时，动画可以正常工作，但当列表中的值发生更改时，动画将在列表的旧值上执行，然后新值将不带动画显示。
在我的component.ts中，我有：
export const itemAnimation = [
style({
opacity: 0
}),
stagger(30, [
animate(
'300ms 100ms ease-in',
style({
opacity: 1
})
)
])
];
@
浏览 0提问于2019-08-16得票数 0
我在Angularjs2应用程序中设置了一个时间间隔，如下所示。当注销时，我需要停止这一点，因为在注销之后，我还可以看到我的预加载程序工作，这意味着函数(UpdateTransactions)仍然在被调用。
transaction.component.ts
ngOnInit() {
let timer = Observable.timer(45000,40000);
timer.subscribe(t=> {
this.UpdateTransactions();
});
}
login.component.ts
logout(){
loca
浏览 4提问于2016-10-26得票数 1
回答已采纳
我有一种情况，我必须取消复选框，点击一个按钮。
这是我的复选框代码
<ion-checkbox [checked]="!isChecked" [disabled]="!isdisabled" (ionChange)="saveProfile($event)" [(ngModel)]="default"></ion-checkbox>
我试过使用!iChecked，但是它不起作用。基本上，如果用户已经选中了复选框，我希望在单击按钮时(根据特定条件)不选中复选框。
<button class="b
浏览 1提问于2018-01-12得票数 1
回答已采纳
1回答
这主要是一个设计/方法问题。
我想要达到的目标:
当用户注销时，=>隐藏注销链接。只有当用户登录时，才使注销链接可见。
问题:
菜单和注销是两个不同的组件。因此，当用户单击“注销”时，将此信息传递给菜单组件是非常困难的。我正在寻找一种更恰当/更直接的方法。请给我一些建议。
我的代码片段如下-
menu.component.html
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ro
浏览 2提问于2017-05-21得票数 1
1回答
是否可以访问为该组件定义的.scss文件中的组件变量？
例如：
example.component.ts
@Component({
selector: 'example-selector',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css']
})
export class ExampleComponent {
@Input() size: number;
}
example.component.scss
.some-class {
浏览 1提问于2018-02-01得票数 13
回答已采纳
请在完整浏览器中打开它，然后单击任何li标签的按钮/图像，该按钮将更改为不同的图像，就像活动的.Even一样。如果您也刷新，则此活动将不会更改，因为我们正在将active=true添加到localstorage.Now中。问题是，在页面加载时，当您单击任何li的按钮时，除按钮外，其他li的按钮应该被禁用，并且当我们刷新时，也不会更改任何内容，直到您清除localstorage.Please找到以下代码
app.component.html
<hello name="{{ name }}"></hello>
<p>
浏览 11提问于2020-02-11得票数 0
回答已采纳
1回答
我试图使用@ but ()从父组件中更改子组件属性，但它不起作用。我使用共享服务实现了这一功能，但我确实理解了自己做错了什么，以及为什么使用@ but ()不能工作。
我在子组件中创建了两个按钮，其文本来自父组件的@ data ()数据对象。当我双击两个按钮所在的表行时，使用@Input() isDisabled属性使用共享服务禁用按钮。当我单击父组件中的get按钮时，数据更改和更改将得到反映。但是，当我尝试使用isDisabled = false父组件启用按钮时，更改不会得到反映。
下面是代码示例的链接：
子组件
import { Component, Input, OnInit } fro
浏览 1提问于2017-10-23得票数 0
我有一个模板如下：
<div *ngFor="let x of inputs">
<input type="text" list="datalist" name="datalist">
<datalist id="datalist">
<option *ngFor = "let i of dataListOptions" [value]="i">{{i-1}}</option>
</da
浏览 0提问于2019-02-20得票数 4
回答已采纳
如何通过在父视图中单击事件访问子组件中的函数。
我的父视图中有两个按钮，每个按钮代表一个组件。
<ul>
<li><button (click)="buttonOne()">component 1</button></li>
<li><button (click)="buttonTwo()">component 2</button></li>
</ul>
我想单击按钮组件1并显示组件1，当我单击按钮组件2时，隐藏组件1并显示组件
浏览 4提问于2018-01-04得票数 0
回答已采纳
我正在尝试禁用男性单选按钮，而不使用id。并使用angular rendering2。但不起作用。不更改form.ts文件中的html.only更改 form.html <label>
<input type="radio" value="male" formControlName="gender">
<span>male</span>
</label>
<label>
<input type="radio"
浏览 6提问于2019-09-14得票数 4
所以我做了很多研究，但我就是搞不懂。
我想使用角材质窗体控件来制作文本框组件。
在这个之后，我实现了如下
textbox.component.html
<mat-form-field>
<input matInput type="text" [placeholder]="placeholder" [(ngModel)]="value" />
<mat-error>This field is required</mat-error>
</mat-form-field>
te
浏览 0提问于2019-04-20得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
