Question

所以我是OOP的新手，尝试使用带有打字稿的第2角离子2。假设我在home.html文件中有一个输入，该文件与home.ts中的用户名相关联，如下所示：

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

现在我想要一个服务（userService.ts）从输入或home.ts获取用户名并修改它并将结果存储为newusername。

我是否必须在服务/提供程序中创建构造函数，例如在HOME中实例化一个新的home对象，尽管我已经在home.ts中创建了一个这样的对象？

我在userServices中导入了HomePage但是我无法访问newusername，因为我没有创建它的对象。

Answer 1

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

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) {
  users.component = this;
}

但是仍然需要某种方式来通知服务有关输入的更改，如上例所示。

Answer 2

我不知道你究竟想要什么，但如果它对你有好处，请看看这个。（我在服务中使用 newusername ）

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

工作演示：https://plnkr.co/edit/03oXUTZYwRRo8PTfDFlA?p=preview

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

}

<强> service.ts

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

@Injectable()
export class service{

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

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

2 个答案: