通过打字稿中的引用传递变量[Angular 8] [英] Passing variables by reference in typescript [Angular 8]

问题描述

我在组件的html上有几个变量，这些变量是由打字稿文件指定的.在html中声明如下:

I have a several variables on the html of the component which are given their values by the typescript file. It is declared in html as follows:

<h1>{{myproperty1}}<\h1>
<h1>{{myproperty2}}<\h1>
<h1>{{myproperty3}}<\h1>

在打字稿文件中，它们在全局范围内声明如下:

In the typescript file they are declared in the global scope as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent implements OnInit {
  myproperty1:string;
  myproperty2:string;
  myproperty3:string;
}

现在可以在ts文件中的函数中使用 this 更新这些值.例如，如果我想将 myproperty1 设置为某项，则可以按以下步骤进行操作:

Now these values can be updated using this in a function in the ts file. For example if I wanted to set myproperty1 to something I would do it as follows:

 
})
export class AppComponent implements OnInit {
       myproperty1:string;
       myproperty2:string;
       myproperty3:string;

myfunction(){
       this.myproperty1 = "Hello world";
}

setInterval(()=>{myfunction();},2000);

这种方法的问题是我失去了普遍性.该功能仅对一个变量有效.这是令人不快的.当函数的代码更长时，问题将进一步扩大.我需要一个函数，可以通过 reference 在 pass 中输入值.例如，我不对每个属性执行功能，而是对特定变量进行 pass .

The problem with this approach is that I lose generality. The function becomes valid for only ONE variable. This is displeasing. The problem scales up much more when the code for the function is longer. I need a function where I can pass in the value by reference. For example instead of executing the function for each property, I instead pass in that specific variable.

现在，我了解到在javascript和扩展程序中，打字稿原始变量是通过值传递的，我需要传递 object ，但这也无济于事.假设我创建了以下对象:

Now I understand that in javascript and by extension typescript primitive variables are passed by value and I need to pass an object, however this also does not help. Let's say I create the following object:

let myobject = {
        this.property1:"Lorem",
        this.property2:"Lorem",
        this.property3:"Ipsum",
}

现在，当我执行函数时，我需要传递特定键，否则它不会更改字符串.对于上述对象，我编写以下函数并调用它:

Now when I execute the function, I need to pass in the specific key other it does not change the string. For this above object I write the following function and call it:

func(obj){
obj.property1 = "Hello world";
}
func(myobject);

如果我不声明 property1 ，它不会修改该条目，而是在字典上附加一个新的键值对.

Here if I do not declare property1 it does not modify that entry, instead it appends a new key value pair on the dictionary.

我在此处遇到的另一种方法是使用 window 进行此操作，如下所示:

Another method I came across here mentioned using the window to do this as follows:

var a = 1;
inc = function(variableName) {
  window[variableName] += 1;
};

inc('a');

alert(a); // 2

但是在角度上会出现以下错误:

However in angular it gives the following error:

Error: src/app/app.component.ts:86:7 - error TS2322: Type 'string' is not assignable to type 'Window'.

我想要的实际上只是一种通过引用传递值的方法，然后可以将其正确呈现在html上.

What I want is really just a method of passing in a value by reference which can then be rendered on the html correctly.

推荐答案

执行此操作的方法是使用一个对象，然后将该对象用于html页上的值插值.现在说您要更新html上的一些值.您将它们分配如下:

The way to go about doing this is by using an object and using that object for the interpolation of the value on the html page. Now say you want to update some values on the html. You assign them as follows:

app.component.html

<h1>{{object.property1}}<\h1>
<h1>{{object.property2}}<\h1>
<h1>{{object.property3}}<\h1>

现在在ts文件中，我们将其声明如下:

Now in the ts file we declare them as follows:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent implements OnInit {
  object = {
        property1: 'somestring',
        property2: 'somestring',
        property3: 'someotherstring'
        }

}

现在，以这种方式声明它们的整个要点是不会失去一般性.这样，您无需为每个属性创建单独的函数，而是通过引用进入该属性中的 pass ，并且更改后的值也会在html页面上更新.为了阐明我的观点，假设我编写了一个函数，该函数将使用字符串并为该新值设置一个 specific 属性，我们希望能够使用 same 每个属性的功能.为此，我们使用此对象，如下所示:

Now the whole point of declaring them in this way to not lose generality. In this way instead of creating a separate function for each property, you get to pass in that property by reference and it's changed value is also updated on the html page. In order to elaborate my point, say I write one function which will take a string and set a specific property to this new value and we want to be able to use the same function for each property. We do so using this object as follows:

app.component.ts

export class AppComponent implements OnInit {
  object = {
        property1: 'somestring',
        property2: 'somestring',
        property3: 'someotherstring'
        }
  modifydata(x:string,value:string){
       this.object[value] = x;
        }


    //call the function

  setInterval(()=> {
        var mystring = 'property1';
        this.modifydata('hello world',mystring);},2000);


}

结果:我们已经成功地概括了可用于任何给定属性的函数，而无需对任何值进行硬编码.

RESULT: We have successfully generalized the function to be used for any given property without having to hardcode any values.

这篇关于通过打字稿中的引用传递变量[Angular 8]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！