Javascript 在typescript中通过引用传递变量[8]

我在组件的html上有几个变量，它们的值由typescript文件给定。它以html格式声明如下：

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

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

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

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

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

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

inc('a');

alert(a); // 2

现在可以使用ts文件中的函数中的

this

更新这些值。例如，如果我想将

myproperty1

设置为某个值，我将按如下操作：

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

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

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

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

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

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

inc('a');

alert(a); // 2

这种方法的问题是我失去了一般性。该函数仅对一个变量有效。这令人不快。当函数的代码更长时，问题会更严重。我需要一个函数，在该函数中，我可以通过

引用
传递值中的
。例如，我不是为每个属性执行函数，而是在该特定变量中传递

现在我了解到，在javascript和扩展类型中，脚本原语变量是按值传递的，我需要传递一个
对象
，但是这也没有帮助。假设我创建了以下对象：

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


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

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

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

我遇到的另一种方法提到了使用
窗口执行此操作，如下所示：

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

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

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

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

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


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

inc('a');

alert(a); // 2


但是，在角度上，它会产生以下误差：

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

我想要的实际上只是一种通过引用传递值的方法，然后可以在html上正确呈现该值。
您可以选择声明一个参数，该参数属于相应组件的属性类型（或您希望有效的属性）

然后可以使用索引类型访问属性

大概是这样的：

type props = 'prop1' | 'prop2';

export class MyComponent {
  prop1: string = '';
  prop2: string = '';
  prop3: number = 0;  // can't be passed to updateProp because not assigned to type props

  updateProp(p: props) {
    this[p] = 'Updated!';
  }
}

编辑：

例子：
执行此操作的方法是使用一个对象，并使用该对象在html页面上插入值。现在假设您想更新html上的一些值。您可以按如下方式分配它们：

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

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

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

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

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


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

inc('a');

alert(a); // 2


app.component.html

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

现在，以这种方式声明它们的全部目的是为了不失去通用性。通过这种方式，您不必为每个属性创建单独的函数，而是可以通过引用来传递该属性中的
pass
，它的更改值也会在html页面上更新。
为了阐述我的观点，假设我编写了一个函数，它将接受一个字符串，并将一个特定的属性设置为这个新值，我们希望能够对每个属性使用相同的函数。我们使用此对象进行此操作，如下所示：

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

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

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

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

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


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

inc('a');

alert(a); // 2


应用程序组件.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'
        }

}





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


}

结果：我们成功地将用于任何给定属性的函数通用化，而无需硬编码任何值。
“在typescript文件中，它们在全局范围中声明如下：“这不是全局范围。它从全局作用域嵌套了两个作用域（或者更多，取决于您如何计算）：首先是模块作用域，然后是类作用域。它在类的全局作用域中，对吗？短语“全局作用域”特别是指整个程序/页的全局作用域。这些只是属性（是的，可以被类的任何成员访问）。不起作用，对我来说也没有意义。这确实起作用。我添加了一个stackblitz来演示。