将变量传递给自定义组件

Question

我有我的自定义组件：

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

然后在我的组件代码中使用它？

Answer 1

您可以向组件上的属性添加 @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 文档。

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

有关详细信息，请查看 this page。

将变量传递给自定义组件

Pass variable to custom component

typescript

angular2-template

angular2-components

angular