Oop 从angular2提供程序中的组件访问属性

所以我是OOP新手，尝试了ionic 2和angular 2以及typescript。 假设我在home.html文件中有一个与home.ts中的用户名相耦合的输入，如下所示：

export class HomePage {
public username: string;
public newusername: string; 
...
constructor(public users: UserService) {
...

现在我需要一个服务（userService.ts）从输入或home.ts中获取用户名，并对其进行修改，然后将结果存储为newusername

尽管我已经在home.ts中创建了home的一个对象，但我是否必须在服务/提供者中创建一个构造函数，比如在主页中实例化home的一个新对象

---

我在userServices中导入了主页，但我无法访问newusername，因为我没有将其作为对象。

您需要从组件中的代码调用服务，或者将组件传递给服务

constructor(public users: UserService) {}

@Input() public username: string;
// called when an input was updated
ngOnChanges() {
  this.newusername = this.users.convertUserName(this.username);
}

或

---

但是这仍然需要一些方法来通知服务有关输入的更改，如上面的示例所示。

您需要从组件中的代码调用服务，或者将组件传递给服务

constructor(public users: UserService) {}

@Input() public username: string;
// called when an input was updated
ngOnChanges() {
  this.newusername = this.users.convertUserName(this.username);
}

或

---

但是这仍然需要一些方法来通知服务对输入的更改，如上面的示例所示。

我不知道您到底想要什么，但是如果这对您有好处的话，请看一看。（我会在服务本身中使用newusername）

注意：它与Ionic2无关，因为我不知道Ionic2

工作演示：

---

我不知道你到底想要什么，但是看看这个，如果它对你有好处的话。（我会在服务本身中使用newusername）

注意：它与Ionic2无关，因为我不知道Ionic2

工作演示：

---

您希望userService如何读取用户名？在您键入用户名时或键入用户名后按任何按钮？这更多是一个概念性问题，因此按钮可以完成此操作。请问您为什么要直接从服务访问组件属性？但这似乎不是一个好的设计。更好的方法是

Component---（调用方法）--->Service---（发送结果）--->Component

Ok，这实际上回答了我的问题。我没有理由这么做，我只是想知道是否有一个好的方法，但显然没有：）哦，我明白了。。。很高兴我能帮上忙：）您希望userService如何读取用户名？在您键入用户名时或键入用户名后按任何按钮？这更多是一个概念性问题，因此按钮可以完成此操作。请问您为什么要直接从服务访问组件属性？但这似乎不是一个好的设计。更好的方法是

Component---（调用方法）--->Service---（发送结果）--->Component

Ok，这实际上回答了我的问题。我没有理由这么做，我只是想知道是否有一个好的方法，但显然没有：）哦，我明白了。。。很高兴我能帮上忙：）我做了一些类似于您的第一个解决方案的事情，但我想知道是否有一种直接的方法可以在我的UserService中直接从home.ts访问newusername属性，这样我就可以通过按钮从html调用一个方法，将newusername设置为“xy”。我做了一些类似于您的第一个解决方案的事情，但我想知道是否有一种直接的方法可以直接从我的UserService中的home.ts访问newusername属性，这样我就可以从html中通过按钮调用一个方法，将newusername设置为“xy”。

import { Component } from '@angular/core';
import {service} from './service';
@Component({
  selector: 'my-app',
  template: `
  New User : {{s.newusername}}<br>
  <input type="text" [(ngModel)]="username">
  <button (click)="click(username)">Add User</button>
  `
})
export class AppComponent { 

  constructor(private s:service){
  }

  click(username){
    this.s.addUserName(username);
    console.log(this.s.newusername)
  }

}

import {Injectable} from '@angular/core';

@Injectable()
export class service{

  newusername:string;
  addUserName(str){
    this.newusername=str;
  }
}