Angular 4/5で、他のコンポーネントの関数/変数の使用に関するいくつかの例をグーグルで検索しました。それらは理解に少し役立ちましたが、それでも問題の解決策を見つけることができませんでした。
別のコンポーネントから標準のJavaScript alertを呼び出したい。
次のような変数を持つコンポーネントがあります。
center.ts
export class CenterPage {
public message = new alert("Warning");
center.html
<products [message]="message"></products>
@Inputを使用してproducts.tsのメッセージを取得しています
export class ProductsComponent {
@Input() message;
ここで、ユーザーがproduct.htmlのボタンをクリックしたときに、アラートを表示したいと思います。
<button (click)="message"></button>
これは間違っているようで、ユーザーがボタンをクリックしたときにアラートを表示しようとしている方法は正しくないと思います。
どうすればこれを正しく行うことができますか?
[〜#〜]編集[〜#〜]
これはほんの一例です。最終的には、いくつかのコンポーネントで同じアラートを呼び出す必要があります。そのため、すべてのコンポーネントから呼び出すことができる関数を1つだけにして、冗長なコードがないようにします。
そのような機能には間違いなくサービスを使用する必要があります。 alert.service.tsファイルのように作成する「サービス」フォルダを作成する必要があります。このファイルでは、すべてのコンポーネントに表示するアラート機能を定義します。
次に、このサービスを必要とするコンポーネントにインポートします。
angularドキュメントからこのチュートリアルを読むことをお勧めします。これは本当に便利です: https://angular.io/tutorial/toh-pt4
アラート全体ではなく、文字列をコンポーネントに配置する必要があります。その後、クリックハンドラでアラートを呼び出すことができます。
文字列のみを子コンポーネントに渡します。
export class CenterPage {
public message = "Warning";
専用機能内でクリックを処理します。
<button (click)="myFunc"></button>
関数内でロジックを実行します。
public myFunc() {
alert(this.message);
}