angular2で共有コンポーネントを使用する方法は？

Question

私のアプリケーションは、このように構築されています

1. いくつかの基本的なコンポーネント（家を、ログイン、について、...）私のメイン app.moduleで
2. アプリケーションの各部分のためのいくつかの他のモジュール

私はすべての場所で使用する必要があるコンポーネントToastComponentを持っています。 私は基本的なコンポーネントでうまく動作しますが、モジュールに含まれているコンポーネントではうまく動作しません。

しかし私は、サービスを共有する方法について多くのページを読んで（私はangular2に認めるすべてを理解していない）、私はまだそれは私の場合で動作するようにする方法を見つけ出すことはできません。 （私も共有モジュールを試しましたが、悪化しました）

私が持っている問題は、setMessage（コードの終わりを参照）に与えられたメッセージはコンソールに表示されますが、画面には表示されないということです！

誰かがそれをコード化する適切な方法を教えてくれることを願っています。 TIA

JP Iは、（多くの試行の後に）知られている段階に戻す後ここ

がコードされ...

ToastComponent：

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-toast', 
    templateUrl: './toast.component.html', 
    styleUrls: ['./toast.component.css'] 
}) 
export class ToastComponent { 
    @Input() message = { body: '', type: '' }; 

    setMessage(body, type, time = 5000) { 
    this.message.body = body; 
    this.message.type = type; 
    console.log('ToastComponent %o' , this.message); 
    setTimeout(() => { this.message.body = ''; }, time); 
    } 
} 

app.module

import { ToastComponent }   from './_shared/toast.component'; 
... 
import { LivresModule }    from './livres/livres.module'; // where toast will be used 
import { ExampleComponent }   from './example.component'; // where toast is working fine 
... 
@NgModule({ 
    imports: [ ... , LivresModule ], 
    providers: [ ToastComponent, ... ], 
    declarations: [ AppComponent, ToastComponent, ... ] 
    exports: [ ToastComponent ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 
    bootstrap: [ AppComponent ], 
}) 
... 

livres.module.ts

... 
import { ToastComponent }   from '../_shared/toast.component'; 
import { AuteursComponent }   from './auteurs.component'; // where to use toast effectively 
... 
@NgModule({ 
... 
    providers: [ ToastComponent, ... ] 
    declarations: [ 
//  ToastComponent, // error as declared twice with app.module : OK so commented 
... 

auteurs.component

... 
import { ToastComponent }  from '../_shared/toast.component'; 
... 
constructor(private http: Http, private authorService: AuthorService, 
       private toast: ToastComponent) { } 
... 
addAuthor() { 
... 
    this.toast.setMessage('Auteur ajouté', 'success'); 
} 

auteurs.component.html

...<app-toast [message]="toast.message"></app-toast>... 

auteurs.component。*は正常に動作しますapp.moduleの構成部品のコピーです。

---

NEW INFO： 私は私が構築しています1を模倣光アプリを再作成しています、と私は、モジュール内のページのために、このエラーが発生しました：

Unhandled Promise rejection: Template parse errors: 
    Can't bind to 'message' since it isn't a known property of 'app-toast'. 
    1. If 'app-toast' is an Angular component and it has 'message' input, then verify that it is part of this module. 
    2. If 'app-toast' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
    ("<app-toast [ERROR ->][message]="toast.message"></app-toast> 
<p> page2 works! </p> 
<button (click)="displayMsg()"> Click !"): Page2Component@0:11 

私は "追加した理由ですスキーマ：[CUSTOM_ELEMENTS_SCHEMA] "（私はこれを忘れてしまった）が、実際には実行時にコンパイル時にエラーを隠している！

サービスに変換してもhtmlコードとcssは表示されません。

Answer 1

上記のコメントに記載されているように、必要なのは共有サービスかもしれません。ここでは共有サービスの簡単な実装の下にあります。共有サービスを理解するのに役立つことを願っています。

この共有サービスは、setMessageメソッドを実装して実装します、その後、あなたのauteurs.componentに、あなたはあなたのコンストラクタでそのサービスを注入だろう、とあなたがメッセージの値を変更したい場合、あなたはそのようなサービスでそのメソッドを呼び出します。

this.sharedService.sharedMessage = // your new message here 

そして、ちょうどそれを取得しますあなたが必要とするすべてのコンポーネントにメッセージ：

this.message = this.sharedService.sharedMessage; 

これはあなたがアクセス権を持つ方法です。しかし、下の例を見てください！

ここでは、どちらのコンポーネントで行った変更の影響を受けるかを示すために、親コンポーネントと子コンポーネントを実装しました。私はあなたのコードを参照するために、あなたがアプリケーションで操作したい "タイプ"と "ボディ"としていくつか取り上げました。この例では、サービスで常に操作されるため、このサービスを使用するすべてのコンポーネントは、サービスに存在するものと同じ値を持つように実装できます。私は同様にステップの写真で、いくつかのステップを追加します:)あなたは:)

だから最初のオフ、インターフェースたい場所から、あなたがそれにアクセスするサービスとしてごToastComponentを作ることができる：で

export interface IShared { 
    body: string; 
    type: string; 
} 

サービスは、両方のコンポーネントが共有するsharedMessageを設定します。我々はまた、あなたの親と子のコンポーネントは、私が提示し、この場合、実質的に同一であることsharedMessage

@Injectable() 
export class SharedService { 

    sharedMessage; 

    sharedMessage: IShared = { 
     body: 'old body', 
     type: 'old type', 
    }; 

    setMessage(body, type) { 
     this.sharedMessage.body = body; 
     this.sharedMessage.type = type; 
    } 

    constructor() { } 
} 

のために新しいコンテンツを設定する方法があります。どちらの場合でも、コンストラクタに（はい、むしろOnInitで行います）、サービスからのメッセージの現在の値を取得します。ここでは、その値を操作するメソッドもあります。値の操作を行う共有サービス内のメソッドを呼び出すメソッド。一度あなたが理解すれば、これは実際には難しいことではありません。次に、親と子の両方のコンポーネントとhtmlビューを示します。

あなたの親コンポーネント：

HTML：

<h2>Hey, let's play with shared service!</h2> 
<button (click)="setMessage('new Body', 'new Type')">Set new (parent)</button> 
<h4>This message is in parent component: <b>{{message.body}}, {{message.type}}</b></h4> 
<br> 
<child-component></child-component> 

コンポーネント：

message; 

setMessage(body, type) { 
    this.message.body = body; 
    this.message.type = type; 
    this.sharedService.sharedMessage = this.message; 
} 

constructor(private sharedService: SharedService) { 
     this.message = this.sharedService.sharedMessage; 
} 

あなたの子コンポーネント：

HTML：

<button (click)="setMessage('newest Body', 'newest Type')">Set newest (child)</button> 
<h4>This message is in child component: <b>{{message.body}}, {{message.type}></b></h4> 

コンポーネント：

message; 

setMessage(body, type) { 
    this.message.body = body; 
    this.message.type = type; 
    this.sharedService.sharedMessage = this.message; 
} 

constructor(private sharedService: SharedService) { 
    this.message = this.sharedService.sharedMessage; 
} 

そして最後に、このような観点を提示してみましょう。最初に、子コンポーネントを示す親にナビゲートして共有サービスから取得した値を示します。したがって、現在の値を表示し、その値を操作するボタンがあります。

私たちは親コンポーネントのボタンをクリックしたとき、彼らは同じサービスを共有しているのでその後、私たちは、親と子の両方に設定された新しい値を取得します。

そして最後に、我々は、子コンポーネントのボタンをクリックした:)

・ホープ、このことができますが！ :) :)