사용자 지정 구성 요소에 변수 전달

사용자 지정 구성 요소에 변수 전달

사용자 지정 구성 요소가 있습니다.

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

내 구성 요소 코드에 이것을 사용합니까?

추가해야 합니다.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>

자세한 내용은 이 페이지를 참조하십시오.

추가할 수 있습니다.@Input()구성 요소의 속성에 대한 장식자.

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

    @Input() title: string;
}


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

또는 '제목' 변수의 바인딩 제목

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

데코레이터 설명서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/42287304/pass-variable-to-custom-component