Передать переменную в пользовательский компонент

у меня есть мой пользовательский компонент:

@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>

и использовать это в моем коде компонента?

9
angular angular2-components angular2-template

2 ответов

вам нужно добавить 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>

для получения дополнительной информации, проверить на этой странице.

15

вы можете добавить @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()оформителя документация.

5