angular - 如何在Angular中动态添加属性?
问题描述
我有一个指令,我想用它来向输入字段动态添加属性。哪个有效,它将正确的属性添加到输入字段。但是该属性的指令不起作用。所以我想我需要编译它,在新的 Angular 中没有编译。
所以我用Renderer2
了,但还是不行。
动态添加属性的指令:
import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
@Directive({
selector: '[addAttributes]'
})
export class addAttributesDirective implements OnInit {
@Input() attributes: any;
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.addAttributes();
}
addAttributes() {
const mapping: any = {
FieldUppercase: 'uppercase'
};
this.attributes.forEach((attr: any) => {
const attribute = mapping[attr];
if (attribute) {
this.renderer.setAttribute(this.el.nativeElement, attribute, 'true');
}
});
this.el.nativeElement.removeAttribute('addAttributes');
}
}
所以当我使用:
<input type="text"
[name]="id"
[id]="id"
class="form-control"
[ngModel]="value"
[attributes]="attributes"
addAttributes />
它添加uppercase="true"
到输入字段,这是正确的。
但是大写的指令不起作用。
指令大写:
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
@Directive({
selector: '[uppercase]'
})
export class UppercaseDirective implements OnInit {
@Input() attributes: any;
constructor(private el: ElementRef) {
}
ngOnInit() {
console.log('uppercase');
}
}
通常我需要uppercase
在控制台日志中查看,但这不起作用。我究竟做错了什么?
在某些情况下我不能使用管道,所以想这样做。
解决方案
似乎没有办法在运行时使用 addAttribute 动态执行此操作。我认为您可以做的是使用布尔输入将所有指令添加到您的元素中,然后有条件地启用或禁用它们。(堆栈闪电战)。
例如 -
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
@Directive({
selector: '[uppercase]'
})
export class UppercaseDirective implements OnInit {
@Input() uppercaseattributes: any;
@Input() uppercase: boolean;
constructor(private el: ElementRef) {
}
ngOnInit() {
if (this.uppercase)
{
/// ===> DO STUFF
console.log('uppercase');
}
}
}
==================================================== ===============================
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
@Directive({
selector: '[lowercase]'
})
export class LowercaseDirective implements OnInit {
@Input() lowercaseattributes: any;
@Input() lowercase: boolean;
constructor(private el: ElementRef) {
}
ngOnInit() {
if (this.lowercase)
{
/// ===> DO STUFF
console.log('lowercase');
}
}
}
==================================================== ===============================
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
template: `<hello name="{{ name }}"></hello>
<p (click)="onClick()"
[uppercase]="enableUpperCase"
[lowercase]="enableLowerCase">
Start editing to see some magic happen :)
</p>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
enableUpperCase: boolean = false;
enableLowerCase: boolean = true;
onClick() {
this.enableUpperCase = !this.enableUpperCase;
this.enableLowerCase = !this.enableLowerCase;
}
}
推荐阅读
- javascript - 将 api 调用和 try catch 块抽象为 JavaScript 中的一种常用方法,使其更可重用
- kubernetes - 查找正在使用的 kubeconfig 文件
- elixir - 如何在 Elixir / Plug 中访问文件上传 / POST
- flutter - 如何将一个用户的通知发送给另一个用户 Signal & Flutter
- dart - 如何在 Dart 中为一些 JSON 数据创建容器?
- c++ - cocos2dx 中的操纵杆 - 版本 4
- php - 使用 AJAX 和 PHP 的实时进度状态报告
- ios - 如何在视图控制器中显示嵌套的 JSON 数组元素
- kubernetes - 从“外部”连接到 k8s 集群时的智能路由
- java - 我们可以更改 wso2/wso2mi Docker 映像中的 Java 版本吗?