親コンポーネントからルーティングの子に値を渡す方法：角2

Question

私はapp.componentとchild.componentを持っています。私はルータコンセントで渡している子コンポーネントの中の変数を渡したいと思います。

ルーティングがapp.module.tsで次のようになります。

const routes: Routes = [ 
     {'path': '', 'component': ChildComponent} 
] 

app.component.html：

<button (click) = "toggle()">toggle</button> 
<p>toggle value in app.component.html :</p> {{val}} 

<router-outlet></router-outlet> 

app.component.ts：だから

.... 
.... 
val = 1; 
toggle(){ 
    if(this.val == 1){ 
     this.val = 0; 
    }else{ 
     this.val = 1; 
    } 
} 
.... 
.... 

、今私のブラウザの出力は次のようになります：

は、今私は、子コンポーネントへ]ボタンをクリックしWHN私は取得しています。この値は1または0を渡したいと私はそれを表示したい行のように「子供は作品」：

ボタンをクリックすると両方の値が変更されます。私はサービスを利用しようとしましたが、動かなかった。私はURLにvalを付けて、URLで表示されるように、ルートパラメータとしてパスに送信したくありません。

Answer 1

正しくサービスを提供するために、2つの方法があり、私は正確な名前を覚えていない：あなたはモジュール内で定義し、内部で宣言されているすべてのコンポーネントの内側にアクセスすることができます

1. グローバルサービスを、モジュール：

   @NgModule({ 
       ... 
       providers: [yourServiceName] 
   }) 
   

2. ローカルサービスは、私が推測する、それはあなたが

   @Component({ 
       ... 
       providers: [yourService] 
   }) 
   

   コンポーネント内に提供し、専用のservice.Whichと呼ばれています

   このサービスおよびこのコンポーネントのすべての子コンポーネントからこのサービスにアクセスできます。

この2つのうちのいずれかを実行している場合、データは必要なコンポーネントで使用できるようになります。

両方のコンポーネントでサービスを提供しないように注意してください。それはより高い階層で提供されるべきです。

Answer 2

また、コンストラクタで子1に親コンポーネントを挿入することができます：ここで

export class ChildComponent { 
    constructor(private app: AppComponent) {...} 
} 

は尋ねた質問の著者としてイベントを渡すための方法ですが、私はこれで行くことをお勧めしません。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="toggle()">click</button> 
    <child-component></child-component> 
`, 
}) 
export class App { 
subject = new Subject(); 
id=0; 

toggle() { 
    this.subject.next(this.id++); 
} 
} 


@Component({ 
    selector: 'child-component', 
    template: ` 
    {{id | async }} 
    `, 
    }) 
    export class Child { 
    id; 
    constructor(private app: App) { 
    this.id = app.subject.asObservable(); 
} 
} 

Answer 3

コンポーネントレベルではなくモジュールレベルでサービスを提供する必要があります（親と子が結合されるべき理由が強い場合のみ）。コードの下に見つけてください：

あなたモジュール：

@NgModule({ 
imports: [BrowserModule, 
      HttpModule 
     ], 
declarations: [App], 
providers: [SharedService], 
bootstrap: [App] 
}) 
export class AppModule { } 

あなたのサービス：

export class SharedService { 
    public val: any = 0; 
} 

アプリのコンポーネント：

constructor(private sharedService: SharedService){ 
} 
.... 
.... 
this.sharedService.val = 1; 
toggle(){ 
    if(this.sharedService.val == 1){ 
     this.sharedService.val = 0; 
    }else{ 
     this.sharedService.val = 1; 
    } 
} 
.... 
.... 

上記構成要素では、SharedServiceを提供していません。プロバイダとしてを指定しないと、新しいインスタンスが作成されますSharedServiceの。

SharedServiceをモジュールレベルで使用すると、1つのインスタンスしか作成されません。

希望すると助かります！