angle2のプロバイダのコンポーネントからのアクセスプロパティ

Question

私はOOPを初めて使い、typescriptで角度2のイオン2を試してみました。今、私は入力または自宅からユーザー名を取るためにサービス（userService.tsを）したい

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

： は、私はこのようなhome.tsでユーザ名に結合されているhome.htmlファイルに入力を持っていると言います。それを修正し、その結果をnewusernameとして保存します。

私はすでにhome.tsでこのオブジェクトを作成しましたが、ホームの新しいオブジェクトをインスタンス化するHomepageのようなサービス/プロバイダでコンストラクタを作成する必要がありますか？

私はuserServicesでホームページをインポートしましたが、私はそのオブジェクトを作成しなかったためnewusernameにアクセスできません。

Answer 1

私はあなたが何をしたいのか分かりませんが、あなたのためにこれを見てください。その私がIonic2を知らないようIonic2とは何の関係もありません：

NOTEを（私はサービス自体にnewusernameを使用すると思います）。 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あなたはUserServiceのユーザー名を読みたいか

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

@Injectable() 
export class service{ 

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

Answer 2

コンポーネント内のコードからサービスを呼び出すか、コンポーネントをサービスに渡す必要があります。

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

が、これはまだ、上記の例のように、入力の変更に関するサービスを通知するために、いくつかの方法が必要になります。