Angular - Renderer2 :如何设置没有值的属性？

在Angular中，Renderer2是一个用于操作DOM元素的API。要设置一个没有值的属性，可以使用Renderer2的setProperty方法。

示例代码如下：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<div #myDiv></div>'
})
export class ExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {
    const divElement = this.el.nativeElement.querySelector('#myDiv');
    this.renderer.setProperty(divElement, 'disabled', true);
  }
}

在上面的例子中，我们首先通过ElementRef获取到了一个具体的DOM元素，然后使用Renderer2的setProperty方法来设置该元素的disabled属性为true。这样就实现了设置一个没有值的属性。

对于没有值的属性，通常用于表示某个状态的开关，比如disabled、readonly等。在实际应用中，可以根据具体的需求来设置相应的属性。

腾讯云相关产品和产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

Angular - Renderer2 :如何设置没有值的属性？

angular、angular-renderer2

在上有一篇文章，提供了一个使用$('body').attr('data-body','');的很好的解决方案然而，在我当前的ionic项目中，我正在使用Angular的Renderer2应用程序接口来操作DOM，并且我需要动态创建一个按钮，并将ion-button设置为其中一个属性。我可以用下面的代码设置有值的属性，但不

浏览 9提问于2018-07-23得票数 1

1回答

如何通过单击“编辑”按钮使表的内容可编辑

angular6

在我的一个Angular组件中，我以表的形式显示了一些值。有一个edit按钮。我希望在单击edit按钮时，可以编辑表的值。例如，单击“编辑”，具有角参考变量#titleColumn的行将通过从textarea中删除readonly属性而变得可编辑。但我不知道这两件事都是怎么做到的 ElementRef，TextArea的nativeElement是什么类型的？我可以使用它设置和

浏览 0提问于2019-08-30得票数 0

1回答

错误: StaticInjectorError(AppModule)[SomeComponent -> Renderer2]在使用Renderer2创建角服务时

javascript、angular

: NullInjectorError:没有Renderer2的提供者！-> Renderer2： (别名)类Renderer2导入Renderer2扩展此基类以实现自定义呈现。例如，如果需要设置名称不静态已知的属性或属性，请使用setProperty()或setAttribute()方法。--

浏览 2提问于2019-11-22得票数 1

2回答

用打字本改变背景色

javascript、css、angular、typescript

我希望更改类型记录中某些元素的css属性的值。但是我发现您不能像在javascript：name.style.color='red'中那样更改它。background-color:red;"></div>TS： import { Component } from '@angulars

浏览 3提问于2022-11-10得票数 0

1回答

是否可以使用Renderer2添加内联样式css变量我尝试了以下方法，但不起作用。import { Component, OnChanges, Output, ViewChild, Renderer2, ElementRef, ViewEncapsulation } from '@angular属性，所以angular不会给我的div添加任何样式。如果我添加了一个合适的css属性，它将像下面的代码一样工作。</div>

浏览 6提问于2018-02-22得票数 2

回答已采纳

2回答

PrimeNG p-对话框positionTop

angular、primeng、primeng-dialog

默认情况下，p-对话框显示在Iframe的中心(以高度表示)，而不是顶部窗口的(iframe容器)的高度。我在p-对话框中找到一个属性positionTop，在这里我们可以设置p-对话框窗口的高度，并创建了一个指令。在overLayPosition中，我想设置positionTop import { Directive, ElementRef, OnI

浏览 1提问于2018-04-02得票数 1

1回答

如何使渲染器setStyle方法工作

angular

我正在使用Visual Code作为编辑器在angular java上工作。我在使用渲染器setStyle属性时遇到了一个问题。import { Directive, Renderer2, OnInit, ElementRef } from '@angular/core'; { constructor(private elRef:

浏览 0提问于2021-01-01得票数 0

2回答

渲染后以角度测量分割高度

javascript、html、angular

有点棱角分明的新手！在我们的Angular应用程序中，我们有一系列不同高度的div需要测量到像素，所以当div的测量值达到一个特定值时，比如每1000px，它会自动插入一个新的div来充当分页符，并将原始div系列强制到1000px的下一个“页面”。在javascript中，获取高度很容易实现，但据我所知，脚本无法正确地与angular应用程序对话来实现此功能。我知道angular可能需要渲染div两次(最初是一次，

浏览 11提问于2018-02-03得票数 1

回答已采纳

1回答

在Angular 9中保持变量的作用域

angular

我来自AngularJS，我最近刚跳到Angular 9。我有一个切换状态(暗模式开或关)，我想要维护它并使其对所有组件可用。我在根路由中切换它，它应该保持所有会话以及所有视图和路由的状态。this.body.classList.add('dark') : this.body.classList.remove('dark');} 这将为根路由中使用的组件激活它，但一旦我转到子组件我习惯于设置一个$scope变量，只要我使用相同的控制器，这个变量就可以

浏览 14提问于2020-04-07得票数 0

3回答

Angular2使用指令在标记中插入自定义属性

angular、attributes、tags、element、directive

我有一个angular 2项目，我正在使用PrimeNG。我使用了一个带有很多自定义属性的特殊标签，这些属性对于这个标签总是相同的。我希望将这些属性外部化，并创建了一个自定义指令，用于添加我需要的所有属性。问题是，这些属性中的一些不是本机的，可能无法识别。这是我的指令：@Directive({})

浏览 0提问于2017-06-21得票数 6

3回答

不使用FormControls和NgModel将值修补到角度文本框

angular、textbox、angular11

我是Angular的新手，我需要在页面加载时不使用FormControls和NgModel将值打补丁到文本框以下是我的代码 calendar; } 我寻求你的帮助来解决这个问题如果我需要添加任何属性或字段

浏览 34提问于2021-07-30得票数 0

回答已采纳

1回答

Angular Renderer2 setStyle函数是否可以对尚未定义样式属性的元素进行操作？

javascript、angular、angular-renderer2

在一个Angular应用程序中，假设我们有一个body元素，如 <body> ...</body> 现在，我想使用Angular Renderer2将其背景设置为某个值，如下所示 this.renderer.setStyle(document.body, 'background', '我的问题是: setStyle函数是否可以对尚未定义样式属性的元素进行操作？

浏览 29提问于2020-08-06得票数 0

回答已采纳

1回答

修改本机元素时，未更新绑定了ngModel的变量

angular、data-binding、directive、angular-ngmodel

有一个Angular指令，它应该只允许在input中包含数字。它的代码如下： Directive, HostListener, Renderer2我猜[(ngModel)]不能检测到原生元素的所有更改。我尝试使用Renderer2以如下方式设置原生元素的值： this.rendere

浏览 6提问于2020-05-24得票数 0

2回答

在Angular 5中有没有一种方法可以轻松地包装或扩展Angular-material指令？

angular、angular-material、angular5、angular-directive

我在angular5应用程序中到处使用angular-material库，但我不想在标记中使用它的指令/组件/类名称，我更喜欢将其与外部库保持不可知。但是，我尝试这样做： ElementRef, Renderer2 } fromfocusMonitor: FocusMonitor) { super(renderer, elementRef, _platform, _focus

浏览 0提问于2018-02-01得票数 4

1回答

renderer2集合属性中指定的角度访问函数

angular、angular2-directives、angular-renderer2

我有一个指令，它使用将表值替换为“href”。

浏览 14提问于2022-01-11得票数 0

回答已采纳

3回答

如何在ElementRef (nativeEelement)中设置HTML内容？

angular、angular-directive

我想用指令来设置HTML元素的内容。这样做背后的想法是在指令中有广告代码，并在我使用指令属性的任何地方设置它。广告代码包含JavaScript和HTML代码。

浏览 0提问于2018-10-16得票数 7

回答已采纳

1回答

Angular selectRootElement适用于应用程序，而不是测试

angular、attributes、angular-renderer2

我的Angular应用程序要求以以下方式将数据传递给页面上的根组件： <application-root testVar="hello world"></application-root> 在做了大量研究之后，我决定不使用ElementRef来访问该属性，而是使用Renderer2。我的AppComponent构造函数设置如下： @Component({ selector: 'a

浏览 24提问于2019-05-23得票数 0

2回答

Colspan没有使用@ViewChild应用于td

angular

没人知道它不起作用的原因。当我检查元素时，我看不到应用的是colspan。

浏览 0提问于2019-06-10得票数 0

2回答

node_modules/ionic-angular/umd/components/action-sheet/action-sheet-component.d.ts:1:22中出现错误-错误TS2724

angular、ionic-framework

我正在用angular开发ionic。今天早上，我尝试更新angular和，但得到了错误。在修复期间，这些错误得到了更多的错误。/@angular/core/core"' has n o exported member 'Renderer'. Did you mean 'Renderer2'?/@angular/core/core"' has no

浏览 158提问于2020-08-16得票数 2

1回答

Angular:使用指令禁用材质按钮不起作用

javascript、angular、typescript、angular-material

我想通过一个指令禁用一些按钮(向按钮添加disabled属性)。此指令适用于经典的html按钮，但不适用于angular material design button (mat-button) import { Component, Directive, ElementRef, Renderer2 } from '@angular/core'; selector: '[myDisableButton]'export

浏览 8提问于2019-09-02得票数 5

回答已采纳

点击加载更多