web-dev-qa-db-ja.com

カスタムコンポーネントに変数を渡す

カスタムコンポーネントがあります。

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }
}

次のように使用できます。

<my-custom-component></my-custom-component>

しかし、どのように変数を渡すことができますか？例えば：

<my-custom-component custom-title="My Title"></my-custom-component>

コンポーネントコードでこれを使用しますか？

angulartypescriptangular2-templateangular2-components
28
rpayanm

コンポーネントにInputプロパティを追加し、プロパティバインディングを使用して値を渡す必要があります。

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

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {

    @Input()
    customTitle: string;

    constructor() {
        console.log('myCustomComponent');
    }

    ngOnInit() {
        console.log(this.customTitle);
    }
}

テンプレートで：

<my-custom-component [customTitle]="yourVariable"></my-custom-component>

詳細については、 このページ をご覧ください。

54
Stefan Svrkota

コンポーネントのプロパティに@Input()デコレータを追加できます。

export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }

    @Input() title: string;
}


<my-custom-component title="My Title"></my-custom-component>

または変数「theTitle」からタイトルをバインドする

<my-custom-component [title]="theTitle"></my-custom-component>

@Input()decorator のドキュメントを参照してください。

8
Garth Mason