Question

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

例如，我有组件：

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

我有标记：

<my-app dynamic1="{{x+y}}" dynamic2="{{x*y}}"></my-app>

在组件的方法中，我需要检索在Angular上下文中计算的“动态”属性（dynamic1和dynamic2）及其值的列表。换句话说，我需要获取对象

{
  dynamic1: 5,
  dynamic2: 6
}

我该如何实现？

为了更好地理解问题，这里是AngularJS的解决方案： https://jsfiddle.net/qp9ngdLu/16/

Answer 1

您可以简单地使用@Input绑定来评估dynamic1/dynamic2变量。

您可以如下所示获取component.ts：-

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

和您的HTML组件可以称为：-

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

请查看以下代码：-

https://stackblitz.com/edit/angular-kfgyhr?file=src%2Fapp%2Fhello.component.ts

Answer 2

您的问题并不十分详尽：为了获得yuou想要的内容，我必须阅读您对答案的评论。

如果我理解正确，则需要动态获取组件的值。

尽管由于缩小可能会出现问题，但您可以按照以下方法进行操作。

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

哪里

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

在您的子组件中：

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

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

Answer 3

阅读评论后，我了解您的需求。这个问题开始时就像X-Y problem，事实证明我是对的。

正如您在上一条评论中所说，您将只创建一个自定义JSON并将其发布到您的后端。为此，您无需创建组件。您可以创建一个通用服务，然后将其注入到您需要的任何地方。这是因为，您设置了X和Y来计算这些和所有动态变量。您最好只在组件内调用服务。您尝试创建的组件实际上没有任何作用。

@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);
        });
    }
}

Answer 4

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

您可以做的是利用ngOnChanges（将为所有@Input装饰的属性调用该属性）并在其中构建您的自定义对象。

Angular 6中的动态特性评估

4 个答案: