Nhiều trường hợp của chỉ thị góc 4 được gọi là từ một thành phần mesed lên các giá trị đầu vào

Question

Tôi có một thành phần trong góc 4 được gọi là ba lần. Trong siêu dữ liệu mẫu tôi có một div với một chỉ thị với một số ràng buộc như thế này.

@import {gServ} from '../gServ.service'; 

@Component: ({ 
    selector: 'sr-comp', 
    template: `<div gDirective [cOptions]="dataChart">` 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    cOptions:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 

     this.cOptions = {}; 
     this.cOptions = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 

     //this.report.opt is binded to a component when is instantiated. 
     //this.gServ.objectMerge is a function that merge the two objects 
    } 
} 

this.cOptions thay đổi cho mỗi trường hợp của các thành phần, sau đó trong chỉ thị tôi có điều này:

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[gDirective]' 
}) 
export class SGDirective implements OnInit { 
    public _element: any; 
    @Input() public cOptions: string; 

    constructor(public element: ElementRef) { 
    this._element = this.element.nativeElement; 
    } 

    ngOnInit() { 
    console.log(this.cOptions); 
    } 
} 

Vấn đề là console.log(this.cOptions); luôn in cùng một đối tượng, ngay cả khi thành phần thiết cOptions với các giá trị khác nhau trong phương thức ngOnInit.

Bạn có ý tưởng gì không?

Answer 1

Thuộc tính thành phần của bạn ràng buộc [cOptions]="dataChart" không tốt, lý do là dataChart của bạn thậm chí không được xác định. nó phải giống như [DIRECTIVE_PROPERTY]="COMPONENT_PROPERTY" và COMPONENT_PROPERTY của bạn thậm chí không được xác định trong lớp thành phần SGComponent.

lớp thành phần của bạn nên được một cái gì đó như thế này:

@import {gServ} from '../gServ.service'; 

@Component: ({ 
    selector: 'sr-comp', 
    template: `<div gDirective [cOptions]="Options">` 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    Options:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 
     this.Options = {}; 
     this.Options = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 
    } 
} 

Answer 2

@Ashwani chỉ ra một vấn đề còn hiệu lực với mã của bạn. Cách mẫu của bạn đang nối dây, không có gì sẽ được chuyển đến đầu vào SGDirective.

Một vấn đề khác mà bạn có thể gặp phải có liên quan đến mã gServ. Nếu gServ là một singleton (có thể là trường hợp) và nó trả về cùng một đối tượng cho mỗi SGComponent s, thì tất cả các SGDirective s sẽ có cùng giá trị. Một cách đơn giản để kiểm tra điều này là đặt {{Options | json}} trong mẫu SGComponent.

Để tạo một phiên bản mới của dịch vụ gServ cho mỗi SGComponent bạn có thể thêm một mảng providers vào siêu dữ liệu @Component. Nó sẽ giống như thế này:

import {gServ} from '../gServ.service'; 

@Component({ 
    selector: 'sr-comp', 
    template: `{{Options | json}}<div gDirective [cOptions]="Options"></div>` 
    providers: [gServ], 
}) 

export class SGComponent implements OnInit { 
    @Input('report') public report: IReportInstance; 
    Options:any; 

    constructor(private gServ: gServ) { 
    } 

    ngOnInit(){ 
     this.Options = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt); 
    } 
} 

Answer 3

Bạn có lẽ sự trở lại cùng/giá trị tại this.gServ.objectMerge) (bạn có thể kiểm tra nó wihtout gọi dịch vụ, và đi qua mỗi một một làm Objet khác nhau bằng cách bạn)

@import {gServ} from '../gServ.service'; 
 

 
@Component: ({ 
 
    selector: 'sr-comp', 
 
    template: `<div gDirective [cOptions]="dataChart">` 
 
}) 
 

 
export class SGComponent implements OnInit { 
 
    //@Input('report') public report: IReportInstance; 
 
    cOptions:any; 
 

 
    constructor(private gServ: gServ) { 
 
    } 
 

 
    ngOnInit(){ 
 

 
     this.cOptions = {nicolas: 'nicolas1'}; //change this in the next component that use the directive 
 

 
    } 
 
}

Nếu xảy ra sự cố, vấn đề của bạn là gServ được cung cấp tại cùng một thành phần gốc. với góc cạnh, nhà cung cấp dịch vụ tại cùng một rootComponent là singleton.

Và sử dụng cùng loại trong chỉ thị và thành phần của bạn !!