使用自定义标签定义复杂属性?

时间:2017-01-31 09:12:13

标签: angular typescript angular2-custom-component

这可以通过自定义元素传递复杂属性,如下所示。

customcomponent.ts

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

@Component({
    selector: 'custom-div',
    template: `<div >
                    Custom Div {{content.value}}
                </div>`
})
export class MyDivComponent {
    @Input() content: any[] = [];
}

app.component.html

<custom-div [content]="content"></custom-div>

app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
})
export class AppComponent {
    content:any={};
    constructor(){
        this.content.value ="Compex property";        
    }
}

而不是像上面那样使用如下所示

customcomponent.ts

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

@Component({
    selector: 'custom-div',
    template: `<div >
        Custom Div {{content.value}}
            </div>`
})
export class MyDivComponent {
    @Input() content: any[] = [];
}

app.component.html

<custom-div [content.value]="content"></custom-div>

app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
})
export class AppComponent {
    content:string;
    constructor() {
        this.content="Compex property";    
    }
}

0 个答案:

没有答案