Angular の @Input() と @Output() について学びます
学生クラスの作成単純な属性はいくつかしかありません (次の属性を実行するとすぐに生成できます)#関連チュートリアルの推奨事項: angularjs(ビデオ チュートリアル)
ng クラス エンティティ/学生を生成します
export class Student { id: number; name: string; age: number; }
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Student } from '../entity/student'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() stu: Student; @Output() deleteEvent = new EventEmitter<number>(); constructor() { } ngOnInit() { } delete(id) { this.stu = null; this.deleteEvent.emit(id); } }
<p *ngIf="stu"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} <button (click)="delete(stu.id)">delete</button> </p>
import { Component } from '@angular/core'; import { Student } from './entity/student'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { stus: Student[] = [ {id: 1, name: '里斯', age: 3}, {id: 2, name: '里斯2', age: 4}, {id: 3, name: '里斯3', age: 5}, ]; stu: Student; constructor() { } selected(stu) { this.stu = stu; } deleteStu(id: number) { this.stus.forEach((val, index) => { if ( val.id === id) { this.stus.splice(index, 1); return; } }); } }
<p> <ul> <li *ngFor="let stu of stus" (click)="selected(stu)"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} </li> </ul> </p> <app-child [stu]="stu" (deleteEvent)="deleteStu($event)"></app-child>
@Input() これは非常に簡単で、親コンポーネントのデータを子コンポーネントのプロパティに渡すだけです;
@Output() 子コンポーネントは EventEmitter を作成します。子コンポーネントの操作により EventEmitter がトリガーされ、この EventEmitter オブジェクトが親コンポーネントのメソッドに割り当てられます。変更されたメソッドは、EventEmitter オブジェクトによって指定されたパラメータを取得して、それを処理します。
プログラミング関連の知識について詳しくは、
以上がAngular の @Input() と @Output() について学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、Angular の学習を継続し、Angular のメタデータとデコレータを理解し、それらの使用法を簡単に理解します。

Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために

この記事では、Angular のステートマネージャー NgRx について深く理解し、NgRx の使用方法を紹介します。

Angular Universal をご存知ですか?これは、Web サイトがより優れた SEO サポートを提供するのに役立ちます。

インターネットの急速な発展に伴い、フロントエンド開発テクノロジーも常に改善され、反復されています。 PHP と Angular は、フロントエンド開発で広く使用されている 2 つのテクノロジーです。 PHP は、フォームの処理、動的ページの生成、アクセス許可の管理などのタスクを処理できるサーバー側スクリプト言語です。 Angular は、単一ページ アプリケーションの開発やコンポーネント化された Web アプリケーションの構築に使用できる JavaScript フレームワークです。この記事では、PHPとAngularをフロントエンド開発に使用する方法と、それらを組み合わせる方法を紹介します。

この記事では、Angular の実践的な経験を共有し、angualr と ng-zorro を組み合わせてバックエンド システムを迅速に開発する方法を学びます。

Angularでモナコエディタを使用するにはどうすればよいですか?以下の記事は、最近業務で使用したangularでのmonaco-editorの使い方を記録したものですので、皆様のお役に立てれば幸いです。

この記事では、Angular の独立コンポーネント、Angular で独立コンポーネントを作成する方法、および既存のモジュールを独立コンポーネントにインポートする方法について説明します。
