web-dev-qa-db-ja.com

angular）の他のコンポーネントからのアラートメッセージを使用する

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つだけにして、冗長なコードがないようにします。

angulartypescriptclickcomponentsalert
1
BlueCat

そのような機能には間違いなくサービスを使用する必要があります。 alert.service.tsファイルのように作成する「サービス」フォルダを作成する必要があります。このファイルでは、すべてのコンポーネントに表示するアラート機能を定義します。

次に、このサービスを必要とするコンポーネントにインポートします。

angularドキュメントからこのチュートリアルを読むことをお勧めします。これは本当に便利です： https://angular.io/tutorial/toh-pt4

2
matirmv

アラート全体ではなく、文字列をコンポーネントに配置する必要があります。その後、クリックハンドラでアラートを呼び出すことができます。

文字列のみを子コンポーネントに渡します。

export class CenterPage {
  public message = "Warning";

専用機能内でクリックを処理します。

<button (click)="myFunc"></button>

関数内でロジックを実行します。

public myFunc() {
  alert(this.message);
}
3
Aer0