Angular/@Input()と@Output()について

@Input()と@Output()について

ようやくやんわりAngularに慣れてきたような気がしている。
雰囲気で理解してる箇所も少なくはないが、ルールや定石がしっかりしている印象なので、要所要所を押さえていけば案外理解しやすいのかもしれない。
@Inputと@Outputが割とややこしかったので記しておく。
コンポーネント内に存在する別コンポーネント、いわゆる親コンポーネントと子コンポーネント間で任意の値やイベントの発火などをさせるために定義するものである。

@Input
親コンポーネントから子コンポーネントへ
string,number等の型や、interface、あるいは配列などで子コンポーネントに渡すことができる。

@Input() condition: string;
@Input() project: Project;
@Input() types: Type[];

@Output
子コンポーネントから親コンポーネントへ
EventEmitterという型を使う。emit() メソッドと subscribe() メソッドを使用してコンポーネント間でデータを共有するのに役立つモジュールとのこと。
<>の中には親に渡す値の型を引数に設定できる。string,number等の型や、interface、あるいは配列などでもいける。

@Output() click = new EventEmitter();
@Output() condition = new EventEmitter<Condition>();

親コンポーネント内に「hoge-child」という別コンポーネントが存在している。親子関係である。
[]内のものは子コンポーネント側に渡すもの、すなわち@Inputで設定されているものであり、()内のものは子コンポーネントから親コンポーネントに渡されてきたもの、すなわち@Outputで設定されたものである。
[fromParent]、[fromParent__2]にはともに文字列を渡している。
hoge-child.component.ts側で型をstringに設定しているためである。
(fromChild)と(fromChild__2)はhoge-childからイベントが渡されてきたら関数を実行するようになっている。
hogeってみんな使うけど何なんだろう。

hoge-parent.comonent.html

    <div>
        <hoge-child
            [fromParent]="'Mohamed Avdur'!" //親コンポーネントから子コンポーネントへ
            [fromParent__2]="'stand'" //親コンポーネントから子コンポーネントへ
            (fromChild)="avdurNotDead()" //子コンポーネントから親コンポーネントへ
            (fromChild__2)="magiciansRed($event)" //子コンポーネントから親コンポーネントへ
        >
        </hoge-child>
        {{ result }}
    </div>

hoge-parent.comonent.ts

    result: string;

    avdurNotDead() {
        return (this.result = 'Yes I am!');
    }

    magiciansRed(event: string) {
        return (this.result = event);
    }

子コンポーネントでは上記のごとく@Inputにはそれぞれstringを設定し、@OutputのfromChildには引数なしのEventEmitter、fromChild__2にはstringを引数にしたEventEmitterを設定している。

hoge-child.component.ts

    @Component({
        selector: 'hoge-child',
        templateUrl: './hoge-child.component.html',
        styleUrls: ['./hoge-child.component.scss'],
    })

    @Input()
    fromParent: string; //親コンポーネントから子コンポーネントへ
    @Input()
    fromParent__2: string; //親コンポーネントから子コンポーネントへ
    @Output()
    fromChild = new EventEmitter(); //子コンポーネントから親コンポーネントへ
    @Output()
    fromChild__2 = new EventEmitter<string>(); //子コンポーネントから親コンポーネントへ

子コンポーネント内では、@Inputの値の文字列のボタンが表示され、クリックすると@Outputにemit()する。
fromChild__2はEventEmitterの引数がstringなので、emit()の引数に文字列を入れてある。
ボタンをクリックすると、それぞれ親コンポーネント内で設定された関数が実行される。
引数を設定してあるfromChild__2にemit()した文字列は親コンポーネント内に$eventとして渡され、関数の引数等に使用できる。

hoge-child.component.html

    <div>
        <button (click)="fromChild.emit()">{{ fromParent }}</button>
        <button (click)="fromChild__2.emit('Cross Fire Hurricane!')">{{ fromParent__2 }}</button>
    </div>

チュートリアルで学ぶような内容かもしれないし実際チュートリアルみたいなもので学んだ気もするが、理解するのに時間がかかってしまった。
理解してしまえばとてもシンプルなので、隙あらばInputしたりOutputしていきたいと思う。