从@Component Angular 2更新@ Directive模板选择器中绑定的数据

Question

I was looking around a particular thing in Angular 2 where I need to update the directive's selector's data bound variable with the upcoming changes. It, however doesn't get updated on every change.

@Directive selector inside @Component's template, let's call comp.html

<sunburst-chart [className]="'sunburst-chart'" width="200" height="200" bind-data="costData">
    </sunburst-chart>

The data I am targeting is ' costData '

Here is how the directive looks like,

 import { Directive, ElementRef, Attribute, SimpleChange, Input, OnChanges, ViewChild } from '@angular/core'; import * as d3 from 'd3'; @Directive({ selector: 'sunburst-chart' }) export class SunburstChart {} 

 import {Component, OnInit, ViewEncapsulation} from '@angular/core'; import {AWSTotalCostService} from '../services/index'; import {Router} from '@angular/router'; import {CostPricingTileModel} from '../models/costpricingtile.model'; @Component({ moduleId: module.id, selector: 'costing-module-tile', templateUrl: 'costpricingtile.html', providers: [AWSTotalCostService], encapsulation: ViewEncapsulation.None, styleUrls: ['costpricingtile.scss'], }) export class CostPricingTileComponent implements OnInit { private costData : any; 

This calls a service, that returns the data, after which, the view is not getting updated.

 private sample () : any { this.sampleService.sampleFun() .subscribe( data => { this.costData = data }, error => this.errorMessage = error ); } ngOnInit () : void { console.log(''); this.sample(); } 

Any help is much appreciated.

The problem I am facing is, I am not able to update the changes to the bound data in the html.

PS. Using latest version of Angular ( The stable release, not beta versions )

Adding simpler terms,

Let's talk simple. I have a d3 chart that I 've created as a directive (@Directive) with selector 'sunburst-chart'. I have a component (@Component) that includes a templateUrl 'a html file', that has this selector as an element. I am pointing the data of that element to the component's data variable 'say costData'. Initially it works fine as I have some data present, when the costData gets changed from service, the costData gets updated, but the changes are not bound back to the selector. Hence the view change doesn't happen

Answer 1

You mentioned that you're using the latest Angular .

Providers are no longer specified within the @Component decorator. Instead, you ought to move them to @NgModule

There are three types of directives in Angular and yours doesn't seem to fit any one of them.

• A component: directive with a template. Selector is an html tag such as your sunburst-chart , but it must use @Component decorator
• An attribute directive. Selector is an html attribute; eg: [sunburst-chart]
• A structural directive, such as *ngIf , to change the structure of the DOM

If you expect the selector to be an HTML tag, use a component instead of a directive.