Pass переменной пользовательского компонента

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 свойство компонента, а затем использовать свойство привязки передать значение к нему:

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 ,

Answer 2

Вы можете добавить декоратор @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.