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

Question

我正在寻找Angular 2中的特定事物，我需要更新指令的选择器的数据绑定变量以及即将发生的更改。 但是，每次更改都不会更新。

@ Component模板中的@Directive选择器，让我们调用comp.html

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

我定位的数据是' costData '

这是指令的样子，

 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; 

这将调用一个返回数据的服务，之后视图不会更新。

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

任何帮助深表感谢。

我面临的问题是，我无法更新html中绑定数据的更改。

PS。 使用最新版本的Angular（稳定版本，而非beta版本）

添加更简单的术语，

我们谈谈简单吧。 我有一个d3图表，我已经创建了一个带有选择器'sunburst-chart'的指令（@Directive）。 我有一个组件（@Component），其中包含一个templateUrl'一个html文件'，它将此选择器作为一个元素。 我将该元素的数据指向组件的数据变量'say costData'。 最初它工作正常，因为我有一些数据存在，当costData从服务更改时，costData得到更新，但更改没有绑定回选择器。 因此，视图变化不会发生

Answer 1

你提到你正在使用最新的Angular 。

不再在@Component装饰器中指定提供者。 相反，你应该将它们移动到@NgModule

Angular有三种类型的指令 ，而你的指令似乎不适合任何一种。

• 组件：带模板的指令。 Selector是一个html标签，例如你的sunburst-chart ，但它必须使用@Component装饰器
• 属性指令。 选择器是一个html属性; 例如： [sunburst-chart]
• 结构指令，例如*ngIf ，用于更改DOM的结构

如果您希望选择器是HTML标记，请使用组件而不是指令。