Javascript 角钢6的动态性能评价

如何在运行时检索属性值并在angular的上下文中计算它们

例如，我有一个组件：

@Component({          
    selector: 'my-app',  
    template: '<h1>{{name}}</h1>'  
})       
export class AppComponent {  
    name: string = "Angular 6"
    @Input() x: Number = 2
    @Input() y: Number = 3
}  

我怎样才能做到这一点

为了更好地理解这个问题，这里是AngularJS的解决方案：

---

据我所知，没有办法直接得到它们

---

您可以使用

ngOnChanges

（它将为所有

@Input

修饰属性调用）并在其中构建自定义对象。

您只需使用

@Input

绑定即可计算

dynamic1/dynamic2

变量

您可以按如下方式使用component.ts：-

@Input() dynamic1: string;
@Input() dynamic2: string;

您的HTML组件可以称为：-

<hello name="{{ name }}" [dynamic1]="x+y" [dynamic2]="x*y"></hello>

请查看以下代码：-

---

你的问题不是很详尽：我必须阅读你对答案的评论才能得到你想要的

如果我理解正确，您需要动态地获取给定给组件的值

虽然它可能会因为缩小而出现问题，但下面是如何做到这一点的

<app-component [dynamic]="obj"></app-component>

在子组件中：

@Input() dynamic: { [key: string]: string };

---

您将有权访问传递到组件中的所有动态特性

看了评论后，我明白了你的需要。这个问题刚开始的时候我觉得我是对的

正如您在上一篇评论中所说，您只需创建一个自定义JSON并将其发布到后端。为此，您不需要创建组件。您只需创建一个公共服务并将其注入到您需要的任何地方。这是因为，您设置了

X

和

Y

，以及如何计算这些和所有动态变量。您也可以只调用组件中的服务。您尝试创建的组件实际上不起任何作用

@Injectable()
export class CustomBackendService() {

    constructor(private httpClient: HttpClient) {}

    post<T>(url, body) {
        return this.httpClient.post<T>(url, body, { observe: 'body' });
    }
}

---

---

您会在angular之外使用这些值吗？dynamic1和dynamic2是@input属性，请为此使用属性绑定，即：

[dynamic1]=“x+y”

@AsadShah:目标不是在组件代码中描述这些属性，而是在runtime@BunyaminCoskuner No@Interloper谁将动态设置这些属性？你的问题不清楚，“dynamic1”和“dynamic2”的名字事先不知道。我需要在运行时发现它们。您认为

x

和

y

值来自哪里？我相信它一定是来自某种成分。因此，您可以将它们作为

@Input

值。您是对的，x和y都有输入修饰符。但是dynamic1和dynamic2-没有。如果

x

和

y

具有

@Input

装饰器。它们的定义是什么？它一定在某个组件的某个地方。当您使用它们来分配

动态

属性时，该组件通常是子组件。因此，按照上面的编码使用它是安全的。如果你仍然不清楚你想要得到什么，请创建一个stackblitz并写一个关于你期望的详细解释。我想获得如下控制台输出：x=2y=3 dynamic1=5 dynamic2=6我没有@Input decorators，因为我不知道advancedid中属性的名称您是否投票否决？如果是这样，请试着理解我写的东西。您不需要知道

@Input

装饰属性<代码>ngOnChanges解决了这个问题。这就是重点，我没有投反对票。但是你的解决方案不适合我，因为它涉及枚举组件代码中的所有属性。嗯……我必须承认我不明白。你能解释一下你到底想做什么吗？什么用例？那不是用例解释。这就提出了一个解决方案，从我们目前看到的情况来看，这个方案可能是错误的。对于你提出的问题，你已经有了一些不同的解决方案，但你仍然认为它没有解决。所以，请用角度以外的语言来解释。你在解决什么用例？这并不能解决我的问题，因为我必须在组件代码中列出所有属性的名称。我想避免这样，不，你不会的。你只需将对象作为输入，而不触摸按键。不，它不是

SimpleChanges

报告它知道的属性，这些属性是定义的输入。你可以想你想要什么，但这不是一个分享你观点的网站，这是一个发布关于你的编码问题的问题的网站。我给你的解决方案：如果你不满意它，考虑打开一个GITHUB发行。抱歉，但你没有给我任何东西（我没有问这个问题），请保持你自己的紧张。这是评论部分，目的是评论其他人的答案。我没有看到任何解释为什么我所说的是不真实的。他通过显式地传递

dynamic1

和

dynamic2

然后使用这两个属性构建对象来提问的方式在

SimpleChanges

和您的解决方案之间没有重要区别。当然，我知道您的解决方案适用于已知/显式传递的属性名称后面的情况，因为可以在不声明的情况下扩展包装器对象。这就是为什么我说他的问题不清楚。这不是我问题的解决办法。它的意思是提取标记组件的属性。看看AngularJS（有问题的链接）上的解决方案。我检查了这个链接。您设置了

x=2

和

y=3

意味着

my business comp

本身就有这些值。你不需要从任何地方提取属性，为什么不呢？在本例中，我在运行时提取表达式并对其求值。实际上，没有简单的方法可以做到。是的，你可以做到，但你真的需要吗？正如我在示例中所示，您可以简单地计算组件中所需的所有内容。您不需要传递变量名（

dynamic1

，

dynamic2

）及其表达式（

x+y

，

x*y

）。因为，您的公共组件实际上并没有做任何事情。它只是将所有内容传递到后端。一项服务可以取消

obj = {
  dynamicPropertyOne: "One",
  dynamicPropertyTwo: "Two",
};

@Input() dynamic: { [key: string]: string };

@Injectable()
export class CustomBackendService() {

    constructor(private httpClient: HttpClient) {}

    post<T>(url, body) {
        return this.httpClient.post<T>(url, body, { observe: 'body' });
    }
}

@Component({
    select: 'my-business-comp',
    template: ....
})
export class MyBusinessComponent {

    x = 2;
    y = 3;

    constructor(private customBackendService: CustomBackendService) {}

    // you should call this method somehow
    callBackend() {
        const input = {
             dynamic1: this.x + this.y,
             dynamic2: this.x * this.y
        };
        this.customBackendService.post('some-url', input).subscribe(result => {
             console.log(result);
        });
    }
}